nitro_sg 3.0.1 → 3.0.2

data/components/TextInput/styles.scss

@@ -0,0 +1,3 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+@import "form-control.scss";

data/components/TextInput/styles.scss.flow

@@ -0,0 +1,7 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'form-control': string;
+  +'hidden-xxs': string;
+  +'visible-xxs': string;
+|};

data/components/TimePicker/TimePicker.jsx

@@ -0,0 +1,218 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import moment from 'moment'
+
+import styles from './styles.scss'
+
+type Props = {
+  className: string,
+  clock: 24 | 12,
+  disabled: boolean | "disabled",
+  multiGroup: boolean,
+  labelInside: boolean,
+  defaultValue: string | Object,
+  onChange: () => mixed,
+  required: boolean,
+  minHour: number,
+  maxHour: number,
+}
+
+export default class TimePicker extends React.Component<Props> {
+
+  static defaultProps = {
+    clock: 12,
+    disabled: false,
+    multiGroup: true,
+    labelInside: true,
+    defaultValue: moment().hour(0).minute(0),
+    minHour: 0,
+    maxHour: 24,
+    onChange: () => {},
+  }
+
+  state = {
+    hour: '',
+    minute: '',
+  }
+
+  componentWillMount() {
+    const {defaultValue} = this.props
+    const t = moment(defaultValue)
+    const hour = t.format('HH')
+    const minute = t.format('mm')
+    if(t.isValid()) {
+      this.setState({
+        hour,
+        minute,
+      })
+      this.handleTimeChange(hour, minute)
+    }
+  }
+
+  props: Props
+
+  handleTimeChange(hour, minute) {
+    if (hour == '' && minute == '') {
+      this.props.onChange('')
+    } else {
+      this.props.onChange(`${hour}:${minute}`)
+    }
+  }
+
+  handleOnHourChange = (e) => {
+    const hour = e.target.value
+    let minute = this.state.minute
+    if (hour != '' && minute == '') {
+      minute = '00'
+    } else if (hour == '') {
+      minute = ''
+    }
+    this.setState({hour, minute})
+    this.handleTimeChange(hour, minute)
+  }
+
+  handleOnMinutesChange = (e) => {
+    let minute = e.target.value
+    const hour = this.state.hour
+    if (hour != '' && minute == '') {
+      minute = '00'
+    }
+    this.setState({minute})
+    this.handleTimeChange(hour, minute)
+  }
+
+  renderHoursSelect() {
+    let options;
+    const { minHour, maxHour } = this.props
+    options = [<option key="ts-hr-option-no"/>]
+
+    for(let i = minHour; i < maxHour; ++i) {
+      const h = moment().hour(i)
+      options.push(
+        <option
+            key={`ts-hr-option-${i}`}
+            value={h.format('HH')}
+        >
+          <Choose>
+            <When condition={this.props.clock == 12}>
+              {h.format('ha')}
+            </When>
+            <Otherwise>
+              {h.format('HH')}
+            </Otherwise>
+          </Choose>
+        </option>
+      )
+    }
+
+    let props = {
+      className: "form-control",
+      onChange: this.handleOnHourChange,
+      value: this.state.hour,
+    }
+
+    if(this.props.required) props.required = "required"
+    if(this.props.disabled) props.disabled = "disabled"
+
+    return (
+      <select
+          {...props}
+      >
+        {options}
+      </select>
+    )
+  }
+
+  renderMinsSelect() {
+    let minutes = [<option key="ts-min-option-no"/>]
+    for(let i = 0; i < 60; ++i) {
+      const m = moment().minutes(i)
+      const padMins = m.format('mm')
+      minutes.push(
+        <option
+            key={`ts-min-option-${i}`}
+            value={padMins}
+        >
+          {`:${padMins}`}
+        </option>)
+    }
+
+    let props = {
+      className: "form-control",
+      onChange: this.handleOnMinutesChange,
+      value: this.state.minute,
+      disabled: this.state.hour == ''
+    }
+    if(this.props.required) props.required = "required"
+    if(this.props.disabled) props.disabled = "disabled"
+
+    return (
+      <select
+          {...props}
+      >
+        {minutes}
+      </select>
+    )
+  }
+
+  render() {
+    const {
+      className,
+      multiGroup,
+      labelInside,
+      required
+    } = this.props;
+
+    const wrapperCSS = [
+      multiGroup ? "multi-input-group" : "form-group",
+      className,
+      styles.timePicker,
+    ]
+
+    const itemCSS = [
+      "multi-input-group-item",
+      labelInside ? "label-inside" : null
+    ]
+
+    return (
+      <div className={classnames(wrapperCSS)}>
+        <If condition={multiGroup}>
+          <div className={classnames(itemCSS)}>
+            <label>
+              <If condition={required}>{`* `}</If>
+              {`Hour`}
+            </label>
+            {this.renderHoursSelect()}
+          </div>
+          <div className={classnames(itemCSS)}>
+            <label>
+              <If condition={required}>{`* `}</If>
+              {`Minutes`}
+            </label>
+            {this.renderMinsSelect()}
+          </div>
+        <Else/>
+          <div className="col-md-6">
+            <div className="form-group">
+              <label>
+                <If condition={required}>{`* `}</If>
+                {`Hour`}
+              </label>
+              {this.renderHoursSelect()}
+            </div>
+          </div>
+          <div className="col-md-6">
+            <div className="form-group">
+              <label>
+                <If condition={required}>{`* `}</If>
+                {`Minutes`}
+              </label>
+              {this.renderMinsSelect()}
+            </div>
+          </div>
+        </If>
+      </div>
+    )
+  }
+}

data/components/TimePicker/styles.scss

@@ -0,0 +1 @@
+.timePicker {}

data/components/TimePicker/styles.scss.flow

@@ -0,0 +1,5 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+
+|};

data/components/ToggleButton/ToggleButton.jsx

@@ -0,0 +1,68 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+
+type Props = {
+  active: boolean,
+  className?: string,
+  offLabel?: string,
+  onLabel?: string,
+  onToggle: () => mixed,
+  size?: 'small' | 'med' | 'large',
+}
+
+import styles from './toggleButton.scss'
+
+export default class ToggleButton extends Component<Props> {
+  static defaultProps = {
+    active: false,
+    size: 'med',
+    onToggle: () => {},
+  }
+
+  props: Props
+
+  handleToggle = () => {
+    this.props.onToggle(!this.props.active)
+  }
+
+  render() {
+    const {
+      active,
+      className,
+      offLabel,
+      onLabel,
+      size,
+    } = this.props
+
+    const css = [
+      styles[`toggle-button-${size}`],
+      active ? styles[`toggle-button-${size}-active`] : null,
+    ]
+
+    return (
+      <div className={classnames(className, "clearfix", styles.root)}>
+        <div
+            className={classnames(css)}
+            onClick={this.handleToggle}
+        />
+        <If condition={offLabel && onLabel}>
+          <label
+              className={classnames(styles[`toggle-button-${size}-label`], styles[`toggle-button-${size}-label-${active ? 'active' : 'inactive'}`])}
+              onClick={this.handleToggle}
+          >
+            <If condition={active}>
+              <strong>
+                {onLabel}
+              </strong>
+            <Else/>
+              {offLabel}
+            </If>
+          </label>
+        </If>
+      </div>
+
+    )
+  }
+}

data/components/ToggleButton/toggleButton.scss

@@ -0,0 +1,70 @@
+@import "base-variables/_colors.scss";
+@import "base-variables/_spacing.sass";
+@import "base-variables/_typography.sass";
+
+.root {
+  cursor: pointer;
+}
+
+.toggle-button {
+
+  @mixin toggle-btn($radius) {
+    $inactive: $gray-2;
+    $active: $power-green;
+    $offset: $radius / ($radius / 2);
+    border: 1px solid $inactive;
+    border-radius: $radius;
+    background: $inactive;
+    float: left;
+    margin-right: $space-base;
+    padding: $radius / 2;
+    position: relative;
+    width: $radius * 2;
+    transition-property: background border;
+    transition-duration: 0.5s;
+    &::before {
+      content: ' ';
+      cursor: pointer;
+      border-radius: $radius;
+      background: $white;
+      padding: ($radius / 2) - $offset;
+      position: absolute;
+      left: $offset + 0px;
+      top: $offset + 0px;
+      transition-property: all;
+      transition-duration: 0.5s;
+    }
+    &-active {
+      background: $active;
+      border: 1px solid $active;
+      &::before {
+        left: $radius;
+      }
+    }
+  }
+
+  $radius: 30px;
+
+  &-small {
+    @include toggle-btn($radius / 2);
+    &-label {
+      cursor: pointer;
+      font-size: $font-smaller;
+    }
+  }
+  &-med {
+    @include toggle-btn($radius);
+    &-label {
+      cursor: pointer;
+      margin-top: 5px;
+    }
+  }
+  &-large {
+    @include toggle-btn($radius * 2);
+    &-label {
+      cursor: pointer;
+      margin-top: 5px;
+      font-size: $font-larger;
+    }
+  }
+}

data/components/ToggleButton/toggleButton.scss.flow

@@ -0,0 +1,14 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'root': string;
+  +'toggle-button-large': string;
+  +'toggle-button-large-active': string;
+  +'toggle-button-large-label': string;
+  +'toggle-button-med': string;
+  +'toggle-button-med-active': string;
+  +'toggle-button-med-label': string;
+  +'toggle-button-small': string;
+  +'toggle-button-small-active': string;
+  +'toggle-button-small-label': string;
+|};

data/components/UserStamp/UserStamp.jsx

@@ -0,0 +1,40 @@
+/* @flow */
+
+import React from 'react'
+
+import moment from 'moment'
+import classnames from 'classnames'
+
+import Avatar from '../Avatar/Avatar'
+import Text from '../Text/Text'
+
+import styles from './styles.scss'
+
+type UserStampProps = {|
+  action: string,
+  date: string,
+  name: string,
+  thumbUrl: string,
+|}
+
+const DateFormat = 'MMM Do, YYYY'
+
+const UserStamp = ({ thumbUrl, name, action, date }: UserStampProps) => (
+  <div className={classnames(styles['user-stamp'], 'mt-2')}>
+    <Avatar
+        size="smaller"
+        thumb={thumbUrl}
+        url={thumbUrl}
+    />
+    <div>
+       <p className={'m-0 ml-2 text-smaller text-meta-bold'}>
+        <Text color={'ink'}>{action} {moment(date).format(DateFormat)}</Text>
+      </p>
+      <p className='m-0 ml-2 text-smaller'>
+        <Text color={'ink-lighter'}>{`by ${name}`}</Text>
+      </p>
+    </div>
+  </div>
+)
+
+export default UserStamp

data/components/UserStamp/styles.scss

@@ -0,0 +1,6 @@
+@import "base-mixins/_all.scss";
+@import "base-variables/_all.scss";
+
+.user-stamp {
+  display: flex;
+}

data/components/UserStamp/styles.scss.flow

@@ -0,0 +1,7 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'hidden-xxs': string;
+  +'user-stamp': string;
+  +'visible-xxs': string;
+|};