nitro_sg 3.0.1 → 3.0.2

data/components/Color/Color.jsx

@@ -0,0 +1,55 @@
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import _ from 'lodash'
+
+import Text from "../Text/Text"
+import styles from './styles.scss'
+import colors from '../../sass-mixins/base-variables/_colors-export.scss'
+
+type Props = {
+  children?: Array<React.Node>,
+  colors: Object,
+  className: string,
+}
+
+export default class Color extends React.Component<Props> {
+  static defaultProps = {
+    className: "",
+    colors: colors,
+  }
+  props: Props
+  render() {
+    const {
+      className,
+      colors,
+    } = this.props
+    const css = [
+      className,
+      styles['color-swatch'],
+    ]
+
+    const colorMap = new Map(Object.entries(colors));
+    let colorList = []
+    colorMap.forEach(function(value, key, map) {
+      colorList.push(
+        <div className="col-sm-2 text-center mb-5" key={value}>
+          <div className={classnames(css)} style={{backgroundColor: value }}></div>
+          <div className="color-name"><Text color="ink-lighter" size="small">{key}</Text></div>
+          <div className="color-value"><Text color="sky-dark" size="smaller">{value}</Text></div>
+
+        </div>
+      )
+    });
+
+    return (
+      <div className="container my-5">
+        <div className="row">
+          {colorList}
+        </div>
+      </div>
+    );
+
+  }
+}

data/components/Color/styles.scss

@@ -0,0 +1,6 @@
+.color-swatch {
+  width: 80px;
+  height: 80px;
+  margin: auto;
+  border-radius: 1000px;
+}

data/components/Color/styles.scss.flow

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

data/components/ColorPickerInput/ColorPickerInput.jsx

@@ -0,0 +1,99 @@
+/* @flow */
+
+import React, { Component } from 'react'
+import classnames from 'classnames'
+import { ChromePicker } from 'react-color'
+import { OverlayTrigger, Popover } from 'react-bootstrap'
+
+import styles from './colorPickerInput.scss'
+
+type Props = {
+  className: string,
+  color: string,
+  disableAlpha: boolean,
+  onChange: () => mixed,
+}
+
+export default class ColorPickerInput extends Component<Props> {
+  static defaultProps = {
+    color: '',
+    disableAlpha: true,
+    onChange: function() {},
+  }
+
+  state = {
+    showPicker: false,
+  }
+
+  props: Props
+
+  handleOnInputFocus = () => {
+    this.setState({
+      showPicker: true,
+    })
+  }
+
+  handleOnInputBlur = () => {
+    this.setState({
+      showPicker: false,
+    })
+  }
+
+  handleOnChange = (e) => {
+    this.props.onChange(e.target.value)
+  }
+
+  render() {
+    const {
+      className,
+      color,
+      disableAlpha,
+      onChange,
+    } = this.props
+
+    const css = classnames([
+      className,
+      styles['color-picker-input'],
+    ])
+
+    const cancelFocus = (e) => {
+      if(e.target.tagName === "INPUT") {
+        setTimeout(() => {
+          this.setState({showPicker: true})
+        }, 100)
+      }
+    }
+
+    const popover = (
+      <Popover
+          className={styles.popover}
+          placement="bottom"
+      >
+        <div onClick={cancelFocus}>
+          <ChromePicker
+              color={color}
+              disableAlpha={disableAlpha}
+              onChange={onChange}
+          />
+        </div>
+      </Popover>
+    )
+
+    return (
+      <div
+          className={css}
+      >
+      <If condition={this.state.showPicker}>
+        {popover}
+      </If>
+      <input
+          onBlur={this.handleOnInputBlur}
+          onChange={this.handleOnChange}
+          onFocus={this.handleOnInputFocus}
+          type="text"
+          value={color.hex || color}
+      />
+      </div>
+    )
+  }
+}

data/components/ColorPickerInput/colorPickerInput.scss

@@ -0,0 +1,10 @@
+@import "base-variables/_spacing.sass";
+
+.color-picker-input {
+  position: relative;
+  bottom: 0;
+}
+
+.popover {
+  top: $space-base * 3;
+}

data/components/ColorPickerInput/colorPickerInput.scss.flow

@@ -0,0 +1,6 @@
+// @flow
+/* This file is automatically generated by css-modules-flow-types */
+declare module.exports: {|
+  +'color-picker-input': string;
+  +'popover': string;
+|};

data/components/DOBInput/index.jsx

@@ -0,0 +1,35 @@
+import React from "react"
+import moment from "moment"
+import classnames from "classnames"
+import { DatePicker, Props as DatePickerProps } from "../"
+
+import styles from "./styles.scss"
+
+export type Props = {
+  ...DatePickerProps,
+  preventMinor: boolean,
+}
+
+const eighteenYearsAgo = moment().subtract(18, "years")
+const isNotMinor = (currentDate, selectedDate) =>
+  currentDate.isBefore(eighteenYearsAgo)
+
+const DOBInput = ({ className, preventMinor, isValidDate, viewDate, ...props }) => {
+  className = classnames(className, styles.dob)
+
+  if (preventMinor) {
+    props.viewDate = viewDate || eighteenYearsAgo
+    props.isValidDate = isValidDate || isNotMinor
+  }
+
+  return (
+    <DatePicker {...props} className={className} />
+  )
+}
+
+DOBInput.defaultProps = {
+  value: "",
+  preventMinor: false,
+}
+
+export default DOBInput

data/components/DOBInput/story.jsx

@@ -0,0 +1,20 @@
+import React from "react"
+import moment from "moment"
+import DOBInput from "./"
+
+import { boolean, text } from "@storybook/addon-knobs"
+
+import 'react-datetime/css/react-datetime.css'
+
+export default function Story(stories) {
+  stories.add("DOBInput", () => {
+    const props = {
+      preventMinor: boolean("Prevent Minor", true),
+      viewDate: text("Default Calendar Date", moment("2000-01-01"))
+    }
+
+    return (
+      <DOBInput {...props} />
+    )
+  })
+}

data/components/DOBInput/styles.scss

@@ -0,0 +1,11 @@
+@import "base-mixins/all";
+@import "base-variables/all";
+
+.dob {
+  :global {
+    .rdtDisabled {
+      color: $gray-1 !important;
+      cursor: not-allowed !important;
+    }
+  }
+}

data/components/DOBInput/styles.scss.flow

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

data/components/DatePicker/DatePicker.jsx

@@ -0,0 +1,156 @@
+import React from 'react'
+import classnames from 'classnames'
+import Icon from '../Icon/Icon'
+import {
+  FormControl,
+  ControlLabel,
+  FormGroup,
+  InputGroup,
+  HelpBlock,
+} from 'react-bootstrap'
+
+import moment from 'moment'
+require('moment-timezone')
+
+import Datetime from 'react-datetime'
+
+import style from './styles.scss'
+
+export type Props = {
+  className: string,
+  errorMessage?: ?string,
+  inputProps: Object<{ type: "text" }>,
+  isValidDate: () => boolean,
+  labelInside: boolean,
+  labelText: string,
+  multiInput: boolean,
+  onChange: (any) => void,
+  dateFormat: string,
+  timeFormat: string,
+  closeOnSelect: boolean,
+  timeZone: string,
+  required: boolean,
+  floatAbove: boolean,
+  value: string,
+};
+
+export default class DatePicker extends React.Component<Props> {
+
+  static defaultProps = {
+    className: "",
+    errorMessage: null,
+    inputProps: {
+      type: "text",
+    },
+    onChange: function() {},
+    labelInside: true,
+    multiInput: false,
+    dateFormat: "MM/DD/YYYY",
+    closeOnSelect: true,
+    timeZone: null,
+  }
+
+  state = {
+    valid: true,
+  }
+  props: Props
+
+  fieldFormat = () => {
+    const { timeFormat, dateFormat } = this.props
+    return timeFormat && timeFormat !== "" ? "YYYY-MM-DDTHH:mm:00Z" : dateFormat
+  }
+
+  handleOnChange = (dateTime) => {
+    const { timeZone, onChange } = this.props
+
+    if(dateTime.isValid()) {
+      this.setState({ valid: true })
+      const date = timeZone ? moment.tz(dateTime) : dateTime
+      onChange(date.format(this.fieldFormat()))
+    } else {
+      this.setState({ valid: false })
+      onChange("")
+    }
+  }
+
+  renderInput = (inputProps, openCalendar) => {
+    const {
+      labelText,
+      required,
+      labelInside,
+      errorMessage,
+      multiInput,
+    } = this.props
+
+    return (
+      <FormGroup
+          className={classnames({ 'label-inside': labelInside })}
+          validationState={!this.state.valid || errorMessage ? 'error' : undefined}
+      >
+        <ControlLabel>
+          <If condition={required}>{`* `}</If>
+          {labelText}
+        </ControlLabel>
+        <InputGroup>
+          <FormControl {...inputProps}/>
+          <span
+              className={classnames('input-group-addon', { multi: multiInput })}
+              onClick={openCalendar}
+          >
+            <Icon name="calendar"/>
+          </span>
+        </InputGroup>
+        <If condition={errorMessage}>
+          <HelpBlock>{errorMessage}</HelpBlock>
+        </If>
+      </FormGroup>
+    )
+  }
+
+  dateTimeProps = () => {
+    const {
+      className,
+      dateFormat,
+      timeFormat,
+      closeOnSelect,
+      timeZone,
+      required,
+      multiInput,
+      floatAbove,
+      ...props
+    } = this.props
+
+    const inputProps = this.props.inputProps
+    if (required) inputProps.required = "required"
+
+    return {
+      className: classnames(
+        className, "react-datetime",
+         { 'multi-input-group-item': multiInput, [style.above]: floatAbove }
+      ),
+      closeOnSelect,
+      dateFormat,
+      inputProps,
+      onChange: this.handleOnChange,
+      renderInput: this.renderInput,
+      timeFormat,
+      timeZone,
+      value: this.formattedValue(),
+      ...props,
+    }
+  }
+
+  formattedValue = () => {
+    const { value } = this.props
+    if (!value) {
+      return ''
+    }
+    return moment(value).format(this.fieldFormat())
+  }
+
+  render() {
+    return (
+      <Datetime {...this.dateTimeProps()}/>
+    )
+  }
+}

data/components/DatePicker/styles.scss

@@ -0,0 +1,6 @@
+.above {
+  :global .rdtPicker {
+      top: auto;
+      bottom: 100%;
+  }
+}

data/components/DatePicker/styles.scss.flow

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

data/components/DateTimePicker/DateTimePicker.jsx

@@ -0,0 +1,109 @@
+import React from "react"
+import classnames from "classnames"
+import moment from "moment"
+
+import DatePicker from "../DatePicker/DatePicker"
+import TimePicker from "../TimePicker/TimePicker"
+
+import styles from './styles.scss'
+
+type Props = {
+  className: string,
+  datePickerProps: Object<{
+    disabled: boolean | "disabled",
+    dateFormat: string,
+    timeFormat: string,
+  }>,
+  defaultValue: string | Object,
+  onChange: () => mixed,
+  timePickerProps: Object<{
+    clock: 12 | 24,
+    disabled: boolean | "disabled",
+    multiGroup: boolean,
+    labelInside: boolean,
+  }>
+}
+
+export default class DateTimePicker extends React.Component<Props> {
+
+  static defaultProps = {
+    className: "",
+    datePickerProps: {
+      disabled: false,
+      dateFormat: "MM/DD/YYYY",
+      timeFormat: "",
+    },
+    defaultValue: null,
+    timePickerProps: {
+      clock: 12,
+      disabled: false,
+      multiGroup: true,
+      labelInside: true,
+    }
+  }
+
+  state = {
+    date: null,
+    time: null,
+  }
+
+  props: Props
+
+  formatDateTime = (date, time) => (
+    `${date.format(this.props.datePickerProps.dateFormat || "MM/DD/YYYY")} ${time}`
+  )
+
+  handleOnDateChanged = (date) => {
+    const {time} = this.state
+    this.setState({date})
+    if(!time) return
+    this.props.onChange(this.formatDateTime(date, time))
+  }
+
+  handleOnTimeChanged = (time) => {
+    const {date} = this.state
+    this.setState({time})
+    if(!date) return
+    this.props.onChange(this.formatDateTime(date, time))
+  }
+
+  render() {
+    const {
+      className,
+      datePickerProps,
+      defaultValue,
+      timePickerProps,
+    } = this.props
+
+    const defaultDate = moment(defaultValue)
+    let defaultDateValue
+    if (defaultValue) {
+      defaultDateValue = defaultDate.isValid() ? defaultDate.format(datePickerProps.dateFormat || "MM/DD/YYYY") : null
+    }
+
+    const css = [
+      className,
+      styles.dateTimePicker,
+    ]
+
+    return (
+      <div className={classnames(css)}>
+        <div className="multi-input-group full form-group">
+          <DatePicker
+              defaultValue={defaultDateValue}
+              multiInput
+              onChange={this.handleOnDateChanged}
+              {...datePickerProps}
+          />
+          <div className="form-group multi-input-group-item">
+            <TimePicker
+                defaultValue={defaultValue}
+                onChange={this.handleOnTimeChanged}
+                {...timePickerProps}
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+}