vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Importing css in <style>

old
Javi Jimenez Villar 2015-06-12 23:26:51 +07:00
parent 2198f1a2d3
commit 1582fb6918
8 changed files with 392 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/button.cjsx
View File

@ -2,18 +2,12 @@
@todo
###
css = require "./style/button.styl"
# -- Components
FontIcon = require "./font_icon"
Ripple = require "./ripple"
# -- Mixins
# StyleMixin = require "./mixins/style"
Style = require './style/button'
FontIcon = require './font_icon'
Ripple = require './ripple'
module.exports = React.createClass
# mixins: [StyleMixin]
# -- States & Properties
propTypes:
type : React.PropTypes.string
@ -29,6 +23,10 @@ module.exports = React.createClass
getInitialState: ->
ripple : undefined
# -- Lifecycle
componentWillReceiveProps: ->
@setState ripple: undefined
# -- Events
onClick: (event) ->
event.preventDefault()
@ -39,6 +37,7 @@ module.exports = React.createClass
# -- Render
render: ->
console.log "ripple", @state.ripple
<button data-component-button={@props.type}
onClick={@onClick}
className={@props.style}

21
components/form.cjsx
View File

@ -2,18 +2,20 @@
@todo
###
Button = require "./button"
Input = require "./input"
module.exports = React.createClass
# -- States & Properties
propTypes:
attributes : React.PropTypes.array.required
attributes : React.PropTypes.array
storage : React.PropTypes.bool
# -- Events
onSubmit : React.PropTypes.func
onError : React.PropTypes.func
onValid : React.PropTypes.func
onChange : React.PropTypes.func
getDefaultProps: ->
storage : false
@ -31,10 +33,16 @@ module.exports = React.createClass
value = @getValue()
for attr in @props.attributes when attr.required and value[attr.ref]?.trim() is ""
is_valid = false
@refs[attr.ref].setError?()
@refs[attr.ref].setError? "Required field"
break
@props[if is_valid then "onValid" else "onError"]? event, @
@props.onChange? event, @
if is_valid
@refs.submit?.getDOMNode().removeAttribute "disabled"
@props.onValid? event, @
else
@refs.submit?.getDOMNode().setAttribute "disabled", true
@props.onError? event, @
# -- Render
render: ->
@ -43,14 +51,17 @@ module.exports = React.createClass
onChange={@onChange}>
{
for attribute, index in @props.attributes
<Input {...attribute} />
if attribute.type is "submit"
<Button {...attribute} type="square" ref="submit" onClick={@onSubmit}/>
else
<Input {...attribute} />
}
</form>
# -- Extends
getValue: ->
value = {}
value[ref] = el.getValue() for ref, el of @refs
value[ref] = el.getValue() for ref, el of @refs when el.getValue?
value
setValue: (data) ->

21
components/ripple.cjsx
View File

@ -2,29 +2,28 @@
@todo
###
require "./style/ripple"
module.exports = React.createClass
# -- States & Properties
propTypes:
origin : React.PropTypes.object
colour : React.PropTypes.string
origin : React.PropTypes.object
getDefaultProps: ->
origin : undefined
colour : "#ffffff"
getInitialState: ->
className : undefined
# -- Lifecycle
componentWillReceiveProps: (next_props) ->
@setState className: "active" if next_props.origin?
componentDidMount: ->
el = @getDOMNode()
for key in ["animationend", "webkitAnimationEnd", "oAnimationEnd", "MSAnimationEnd"]
el.addEventListener key, =>
el.classList.remove "active"
, false
componentDidUpdate: ->
@getDOMNode().classList.add "active"
el.addEventListener key, (=> @setState className: undefined), false
# -- Render
render: ->
<div data-component-ripple
className={@state.className}
style={left: @props.origin?.left, top: @props.origin?.top} />

253
components/style/__constants.styl Normal file
View File

@ -0,0 +1,253 @@
@import url('http://fonts.googleapis.com/css?family=Roboto:300,400,700')
// -- Colors
COLOR = #222222
BACKGROUND = #f5f5f5
THEME = #cccccc
WHITE = #ffffff
PRIMARY = #e91e63
SECONDARY = #00bcd4
// THEME = #ef6c00
CANCEL = red
// -- Fonts
FONT_FAMILY = "Roboto", "Helvetica Neue", "Helvetica", "sans-serif"
FONT_SIZE = 16px
FONT_SIZE_TINY = 80%
FONT_SIZE_SMALL = 90%
FONT_SIZE_NORMAL = 100%
FONT_SIZE_BIG = 120%
FONT_WEIGHT_THIN = 300
FONT_WEIGHT_NORMAL = 400
FONT_WEIGHT_BOLD = 700
// -- Sizes
UNIT = 4rem
SPACE = (UNIT * 0.29)
OFFSET = (SPACE * 1.75)
MENU_WIDTH = (3.85 * UNIT)
HEADER_HEIGHT = (1.65 * UNIT)
BUTTON_HEIGHT = (2.5 * SPACE)
BUTTON_CIRCLE_HEIGHT = (2.75 * SPACE)
LOADING_HEIGHT = (1.5 * UNIT)
// -- Shadows
ZDEPTH_SHADOW_1 = 0 1px 6px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.24)
ZDEPTH_SHADOW_2 = 0 3px 10px rgba(0,0,0,0.16), 0 3px 10px rgba(0,0,0,0.23)
ZDEPTH_SHADOW_3 = 0 10px 30px rgba(0,0,0,0.19), 0 6px 10px rgba(0,0,0,0.23)
ZDEPTH_SHADOW_4 = 0 14px 45px rgba(0,0,0,0.25), 0 10px 18px rgba(0,0,0,0.22)
ZDEPTH_SHADOW_5 = 0 19px 60px rgba(0,0,0,0.30), 0 15px 20px rgba(0,0,0,0.22)
// -- Animations
ANIMATION_DURATION = 450ms
ANIMATION_EASE = cubic-bezier(.55,0,.1,1)
ANIMATION_DELAY = (ANIMATION_DURATION / 5)
// normalize v3.0.2 | MIT License | git.io/normalize
html
font-family sans-serif
-ms-text-size-adjust 100%
-webkit-text-size-adjust 100%
body
margin 0
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu,
nav, section, summary
display block
audio, canvas, progress, video
display inline-block
vertical-align baseline
audio
&:not([controls])
display none
height 0
[hidden], template
display none
a
background-color transparent
&:active, &:hover
outline 0
abbr[title]
border-bottom 1px dotted
b, strong
font-weight bold
dfn
font-style italic
h1
font-size 2em
margin 0.67em 0
mark
background #ff0
color #000
small
font-size 80%
sub, sup
font-size 75%
line-height 0
position relative
vertical-align baseline
sup
top -0.5em
sub
bottom -0.25em
img
border: 0
svg
&:not(:root)
overflow hidden
figure
border: 0
hr
-moz-box-sizing content-box
box-sizing content-box
height 0
pre
overflow auto
code, kbd, pre, samp
font-family monospace, monospace
font-size 1em
button, input, optgroup, select, textarea
color inherit
font inherit
margin 0
button
overflow visible
button, select
text-transform none
button, html input[type="button"], input[type="reset"], input[type="submit"]
-webkit-appearance button
cursor pointer
button[disabled], html input[disabled]
cursor default
button::-moz-focus-inner, input::-moz-focus-inner
border 0
padding 0
input
line-height normal
input[type="checkbox"], input[type="radio"]
box-sizing border-box
padding 0
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button
height auto
input[type="search"]
-webkit-appearance textfield
-moz-box-sizing content-box
-webkit-box-sizing content-box
box-sizing content-box
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration
-webkit-appearance none
fieldset
border 1px solid #c0c0c0
margin 0 2px
padding 0.35em 0.625em 0.75em
legend
border 0
padding 0
textarea
overflow auto
optgroup
font-weight bold
table
border-collapse collapse
border-spacing 0
td, th
padding 0
// -- App ----------------------------------------------------------------------
a,abbr,address,article,aside,audio,b,blockquote,body,caption,cite,code,dd,del,dfn,dialog,div,dl,dt,em,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,hr,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
border: 0
margin: 0
outline: 0
padding: 0
*, *:before, *:after
margin: 0
padding: 0
box-sizing: border-box
html
position: absolute
height: 100%
width: 100%
margin: 0
padding: 0
overflow: hidden
body
width: 100%
height: 100%
margin: 0
padding: 0
-webkit-touch-callout: none
-webkit-user-select: none
-moz-user-select: moz-none
user-select: none
overflow: hidden
*
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
h1, h2, h3, h4, h5, h6, label, p, button, abbr, a, span, small
-webkit-font-smoothing: RENDER = antialiased
font-smoothing: RENDER
-webkit-text-size-adjust: 100%
-ms-text-size-adjust: 100%
text-size-adjust: 100%
a
text-decoration: none
-webkit-tap-highlight-color: rgba(0,0,0,0)
::-webkit-scrollbar
width: 0px
height: 0px
input:not([type="checkbox"]):not([type="radio"]), button
-webkit-appearance: none
-moz-appearance: none
appearance: none
-webkit-touch-callout: none
-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
outline: none

67
components/style/button.styl
View File

@ -1,3 +1,64 @@
button
font-size: 16px
font-weight: bold
@import '__constants.styl'
[data-component-button]
z-index : 1
display : inline-block
position : relative
overflow : hidden
font-weight : normal
text-align : center
text-decoration : none
white-space : nowrap
border : none
transition-property background-color, box-shadow
transition-duration ANIMATION_DURATION
transition-timing-function ANIMATION_EASE
// -- Style
&:not([disabled])
cursor : pointer
box-shadow ZDEPTH_SHADOW_1
&:hover /*, &:active, &:focus */
outline : 0
box-shadow ZDEPTH_SHADOW_2, inset 0 0 0 UNIT alpha(WHITE, 10%)
&:not(.primary):not(.secondary)
color : COLOR
background-color : WHITE
&.primary, &.secondary
color : WHITE
&.primary
background-color : PRIMARY
&.secondary
background-color : SECONDARY
&[disabled]
background-color : darken(BACKGROUND, 7.5%)
color : darken(BACKGROUND, 35%)
// -- Layout
& ~ &:not(:last-child)
margin-left : SPACE
> *
pointer-events : none
[data-component-button="square"]
margin-bottom : SPACE
padding : (SPACE / 2) (SPACE / 1.25)
font-size : FONT_SIZE_SMALL
text-transform : uppercase
border-radius : (SPACE / 8)
> *
vertical-align : bottom
> .icon
font-size : FONT_SIZE_BIG
margin-right : (SPACE / 2)
&.anchor
width : 100%
[data-component-button="circle"]
width : BUTTON_CIRCLE_HEIGHT
height : BUTTON_CIRCLE_HEIGHT
font-size : (BUTTON_CIRCLE_HEIGHT / 2.25)
border-radius : 50%
> .icon
line-height : BUTTON_CIRCLE_HEIGHT

24
components/style/ripple.styl Normal file
View File

@ -0,0 +1,24 @@
@import '__constants.styl'
[data-component-ripple]
position : absolute
background-color : alpha(WHITE, 0.65)
transform translateX(-50%) translateY(-50%)
border-radius : 50%
// -- Classes
&.active, &:hover
animation-name ripple
animation-iteration-count 1
animation-timing-function ANIMATION_EASE
animation-duration (2 * ANIMATION_DURATION)
opacity : 0.1
@keyframes ripple
0%
width : 0
height : 0
opacity : 1
100%
width : SIZE = (4 * UNIT)
height : SIZE
opacity : 0

31
spec/test.cjsx → spec/index.cjsx
View File

@ -1,10 +1,7 @@
"use strict"
# -- Components
Input = require "../components/input"
Form = require "../components/form"
Button = require "../components/button"
FontIcon = require "../components/font_icon"
Test = React.createClass
getInitialState: ->
@ -38,21 +35,19 @@ Test = React.createClass
]
<app>
<h1>Hello World !</h1>
<Form attributes={attributes}
onError={@onFormError}
onValid={@onFormValid}/>
# <Button caption="Login" disabled={not @state.submitable} />
# <Button caption="Primary" style="primary" icon="access_alarm" />
# <Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
# <Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
#
# <Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
# <Button type="circle" icon="explore" style="primary" />
# <Button type="circle" icon="zoom_in" style="secondary" />
# <Button type="circle" icon="input" disabled={true} />
#
<FontIcon value="access_alarm" />
<h1>React-Kit</h1>
<h2>New way for create</h2>
<h3>Buttons</h3>
<Button caption="Login" disabled={not @state.submitable} />
<Button caption="Primary" style="primary" icon="access_alarm" />
<Button caption="Secondary" style="secondary" onClick={@onButtonClick}/>
<Button caption="Disabled" disabled={true} onClick={@onButtonClick}/>
<Button type="circle" icon="access_alarm" disabled={not @state.submitable} />
<Button type="circle" icon="explore" style="primary" />
<Button type="circle" icon="zoom_in" style="secondary" />
<Button type="circle" icon="input" disabled={true} />
</app>
React.render <Test/>, document.body

8
webpack.config.coffee
View File

@ -6,11 +6,11 @@ node_modules = __dirname + '/node_modules'
module.exports =
cache : true
resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', 'styl']
resolve : extensions: ['', '.cjsx', '.coffee', '.js', '.json', '.styl']
context : __dirname + '/spec'
entry : ['./test.cjsx']
entry : ['./index.cjsx']
output :
path : if process.env.NODE_ENV is 'production' then './dist' else './build'
@ -28,12 +28,12 @@ module.exports =
inline : true
module :
noParse: [node_modules + '/react/dist/*.js']
noParse : [node_modules + '/react/dist/*.js']
loaders : [
test : /\.cjsx$/, loader: 'coffee-jsx-loader'
,
test : /\.coffee$/, loader: 'coffee-jsx-loader'
,
test : /\.styl$/, loader: 'style-loader!css-loader!stylus-loader'
test : /\.styl$/, loader: 'style-loader!css-loader!stylus-loader?importLoaders=1&minimize!'
]