playbook_ui 2.5.0

data/components/TextInput/TextInput.jsx

@@ -0,0 +1,95 @@
+/* @flow */
+
+import React from 'react'
+import ControlLabel from 'react-bootstrap/lib/ControlLabel'
+import FormGroup from 'react-bootstrap/lib/FormGroup'
+import FormControl from 'react-bootstrap/lib/FormControl'
+
+const isRequired = (boolean) => {
+  if (boolean) {
+    return "*"
+  }
+}
+
+/**
+ * TextInput renders a bootstrapped text input field.
+ *
+ * @param {string} className the CSS class name(s) for the outermost returned div.
+ * @param {string} controlId the CSS id name for the <input> tag.
+ * @param {string} label the text to use as a label.
+ * @param {string} name the text to use as a name.
+ * @param {func} onChange the function to be called when the React onChange event is triggered.
+ * @param {string} placeholder the text to use as a placeholder.
+ * @param {string} value the text to use as a value.
+ * @param {string} type the type of input (i.e. 'text', 'number'). Defaults to 'text'.
+ * @param {string} validationState react-bootstrap validation state of the input, either 'success', 'warning' or 'error'.
+ * @param {boolean} requiredField indicates of the input is a required field.
+ * @returns {ReactElement} JSX.
+ */
+
+type Props = {
+  className: string,
+  controlId: string,
+  inputClassName: string,
+  inputStyle: object,
+  label: string,
+  labelClassName: string,
+  name: string,
+  onChange: () => mixed,
+  placeholder: string,
+  requiredField: boolean,
+  type: string,
+  validationState: string,
+  value: string,
+}
+
+export default class TextInput extends React.Component<Props> {
+  static defaultProps = {
+    className: "",
+    inputClassName: "",
+    inputStyle: {},
+    labelClassName: "",
+    type: "text",
+    validationState: null,
+  }
+  props: Props
+  render() {
+    const {
+      label,
+      placeholder,
+      className,
+      labelClassName,
+      inputClassName,
+      inputStyle,
+      controlId,
+      value,
+      onChange,
+      name,
+      requiredField,
+      type,
+      validationState,
+    } = this.props
+
+    return (
+      <FormGroup
+          className={className}
+          controlId={controlId}
+          validationState={validationState}
+      >
+        <ControlLabel className={labelClassName}>
+          {label} <span>{isRequired(requiredField)}</span>
+        </ControlLabel>
+        {' '}
+        <FormControl
+            className={inputClassName}
+            defaultValue={value}
+            name={name}
+            onChange={onChange}
+            placeholder={placeholder}
+            style={inputStyle}
+            type={type}
+        />
+      </FormGroup>
+    )
+  }
+}

data/components/TextInput/TextInputStory.jsx

@@ -0,0 +1,23 @@
+import React from "react"
+import TextInput from "./TextInput"
+
+// import FormControl from 'react-bootstrap/lib/FormControl'
+
+import { text, select, boolean } from "@storybook/addon-knobs"
+
+export default function TextInputStory(stories) {
+  stories.add("Text Input",
+    () => {
+      let props = {
+        className: text("className", ""),
+        kind: select("kind", ["input", "select", "textarea"], "input"),
+        disabled: boolean("disabled", false),
+      }
+      return (
+        <div className="container my-5">
+          <TextInput {...props} />
+        </div>
+      )
+    }
+  )
+}

data/components/TextInput/form-control.scss

@@ -0,0 +1,96 @@
+// $input-border = $form-border-color
+// $form-border-color;
+
+
+// Form control focus state
+@mixin form-control-focus($color: $input-border-focus) {
+  $color-rgba: rgba(red($color), green($color), blue($color), .6);
+  &:focus {
+    outline: 0;
+    border-color: $power-navy;
+    box-shadow: inset 0 0 0 0.1rem $power-navy, inset 0 0.1rem 0.2rem 0 rgba($power-navy, $opacity-2);
+  }
+}
+
+@mixin style-placeholder {
+  &::-webkit-input-placeholder { @content; }
+  &:-moz-placeholder { @content; }
+  &::-moz-placeholder { @content; }
+  &:-ms-input-placeholder { @content; }
+}
+
+
+
+
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: $padding-base-vertical ($padding-base-horizontal/1.5);
+  font-size: $font-small;
+  font-weight: $bold;
+  line-height: $line-height-base;
+  color: $gray-9;
+  background-color: $input-bg;
+  background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
+  border: 1px solid $form-border-color;
+  border-radius: $input-border-radius; // Note: This has no effect on <select>s in some browsers, due to the limited stylability of <select>s in CSS.
+  box-shadow: none;
+  transition-property: border-color, box-shadow, color, background-color;
+	transition-duration: .24s;
+	transition-timing-function: $bezier;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  @include form-control-focus;
+
+  @include style-placeholder {
+    color: $gray-5;
+		font-style: italic;
+		font-weight: $regular;
+		@include smooth-font;
+	}
+  &[disabled],
+  fieldset[disabled] & {
+    background-color: $input-bg-disabled;
+    color: $sky-dark;
+    opacity: 1; // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655
+  }
+
+  &[disabled],
+  fieldset[disabled] & {
+    cursor: $cursor-disabled;
+  }
+  &.clear {
+
+
+    // height: $input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+    padding: $padding-base-vertical ($padding-base-horizontal/1.5);
+    // font-size: $font-small;
+    // font-weight: $bold;
+    // line-height: $line-height-base;
+    // color: $gray-9;
+    background-color: transparent;
+    background-image: none;
+    border: 0;
+
+  }
+}

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>
+    )
+  }
+}