groundfloor-react-ui 1.0.0

package/components/Inputs/TextInputClicable.js

@@ -0,0 +1,198 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../../constants/defaultThemeColor';
+
+const border = `#D4D7E3`;
+
+const TextBox = styled.div`
+    border: 1px solid ${({ theme, isValid }) => isValid ? border : theme.variant['error']};
+    border-radius: 4px;
+    padding: 8px 12px;
+	display: flex;
+	align-items: center;
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+
+	.input-icon svg path {
+		fill: ${({ theme }) => theme.variant['primary-2']};
+	} 
+    
+    &:focus-within {
+		border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+        outline: none;
+
+		.input-icon svg path {
+			fill: ${({ theme, iconVariant }) => theme.variant[iconVariant]};
+		} 
+    }
+`;
+
+TextBox.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const InputBorder = styled.div`
+    position: absolute;
+    top: calc(100% - 3px);
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    border: 1px solid ${border};
+    border-top: none;
+    border-bottom: none;
+    visibility: ${({ menuIsOpen }) => menuIsOpen ? 'visible' : 'hidden'}
+`
+
+const Input = styled.input`
+	border: 0;
+	outline: 0;
+	color: ${({ theme }) => theme.variant['primary-2']};
+	margin: 0 5px;
+	padding: 0;
+    font-size: 14px;
+	flex-grow: 1;
+	flex-shrink: 0;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::placeholder {
+        color: ${({ theme, textValue }) => textValue ? theme.variant['primary-2'] : theme.variant['neutral-3']};
+      }
+`;
+
+Input.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const requiredAsterisk = css`
+	&:after {
+		content:" *";
+		color: ${({ theme }) => theme.variant['error']};
+	}
+`
+
+const Label = styled.label`
+	display: block;
+	margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '8px'};
+	margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
+    color: ${({ theme }) => theme.variant['neutral-2']};
+	${({ required }) => required ? requiredAsterisk : null}
+`;
+
+Label.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const inline = css`
+	display: flex;
+	align-items: center;
+`
+
+const Form = styled.div`
+	${({ labelInline }) => labelInline ? inline : null}
+	.err-text {
+		color: ${({ theme }) => theme.variant['error']};
+		margin-top: 5px;
+		font-size: 10px;
+	}
+
+	> div {
+		flex: 1 0 auto;
+	}
+`
+
+Form.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const TextInputClicable = forwardRef(({ label, errMsg, iconBefore, iconAfter, onClick, onBlur, iconVariant, readonly, value, placeHolder, onChange, inputText, textValue, autofocusP, menuIsOpen, ...props }, ref) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    return (
+        <Form {...props}>
+            <Label {...props} errMsg={errMsg} >
+                {label}
+            </Label>
+            <div ref={ref.refForm}>
+                <InputBorder menuIsOpen={menuIsOpen}></InputBorder>
+                <TextBox
+                    {...props}
+                    onClick={onClick}
+                >
+                    <div className="input-icon">
+                        {iconBefore}
+                    </div>
+                    <Input
+                        {...props}
+                        ref={ref.refInput}
+                        readOnly={readonly}
+                        onChange={onChange}
+                        value={value}
+                        placeholder={placeHolder}
+                        textValue={textValue} //for styling
+                        autoFocus={autofocusP}
+                        menuIsOpen={menuIsOpen}
+                        size='1'
+                    />
+                    <div className="input-icon">
+                        {iconAfter}
+                    </div>
+                </TextBox>
+                {!menuIsOpen && <div className='err-text'>{errMsg}</div>}
+            </div>
+        </Form>
+    )
+})
+
+TextInputClicable.propTypes = {
+    /**
+     *	Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     *	Label of Input
+     */
+    label: PropTypes.string,
+    /**
+     *	Is the input required?
+     */
+    required: PropTypes.bool,
+    /**
+     *	Should label be inline?
+     */
+    labelInline: PropTypes.bool,
+    /**
+     *	Is the input correct?
+     */
+    isValid: PropTypes.bool,
+    /**
+     *	Error Message
+     */
+    errMsg: PropTypes.string,
+    /**
+     *	Icon before input value
+     */
+    iconBefore: PropTypes.any,
+    /**
+     *	Icon after input value
+     */
+    iconAfter: PropTypes.any,
+}
+
+TextInputClicable.defaultProps = {
+    theme: defaultThemeColor,
+    label: '',
+    required: false,
+    labelInline: false,
+    isValid: true,
+    errMsg: '',
+    iconBefore: null,
+    iconAfter: null,
+}
+
+export default TextInputClicable;

package/components/Inputs/TextInputClicableMS.js

@@ -0,0 +1,255 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../../constants/defaultThemeColor';
+
+const border = `#D4D7E3`;
+
+const TextBox = styled.div`
+    border: 1px solid ${({ theme, isValid }) => isValid ? border : theme.variant['error']};
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+    cursor: pointer;
+
+   
+
+    .input-icon svg path {
+        fill: ${({ theme }) => theme.variant['primary-2']};
+    }
+    
+    &:focus-within {
+        border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+        outline: none;
+
+        .input-icon svg path {
+            fill: ${({ theme, iconVariant }) => theme.variant[iconVariant]};
+        }
+    }
+`;
+
+const InputBorder = styled.div`
+    position: absolute;
+    top: calc(100% - 3px);
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    z-index: 0;
+    border: 1px solid ${border};
+    border-top: none;
+    border-bottom: none;
+    visibility: ${({ menuIsOpen }) => menuIsOpen ? 'visible' : 'hidden'}
+`
+
+
+const Input = styled.input`
+    border: 0;
+    outline: 0;
+    color: ${({ theme }) => theme.variant['primary-2']};
+    margin: 0 5px;
+    padding: 8px 0 8px 12px;
+    font-size: 14px;
+    flex-grow: 1;
+    flex-shrink: 0;
+    cursor: ${({ isSearchable, menuIsOpen }) => !isSearchable ? 'pointer' : menuIsOpen ? 'input' : 'pointer'};
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    ::placeholder {
+        color: ${({ theme, textValue }) => textValue ? theme.variant['primary-2'] : theme.variant['neutral-3']};
+      }
+`;
+
+const requiredAsterisk = css`
+    &:after {
+        content:" *";
+        color: ${({ theme }) => theme.variant['error']};
+    }
+`
+
+const Label = styled.label`
+    display: block;
+    margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '8px'};
+    margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
+    color: ${({ theme }) => theme.variant['neutral-2']};
+    ${({ required }) => required ? requiredAsterisk : null}
+`;
+
+const inline = css`
+    display: flex;
+    align-items: center;
+`
+
+const Form = styled.div`
+    ${({ labelInline }) => labelInline ? inline : null}
+    z-index: 1;
+    .err-text {
+        color: ${({ theme }) => theme.variant['error']};
+        margin-top: 5px;
+        font-size: 10px;
+    }
+
+    > div {
+        flex: 1 0 auto;
+    }
+`
+
+const StyledP = styled.p`
+margin: 0 0 0 10px;
+color: #6B747F;
+white-space: nowrap;
+cursor: ${({ isSearchable, menuIsOpen }) => !isSearchable ? 'pointer' : menuIsOpen ? 'default' : 'pointer'};
+`
+
+const TextInputClicableMS = forwardRef(({ isSearchable, qtySelected, label, errMsg, iconBefore, iconAfter, onClick, onBlur, iconVariant, readonly, value, placeHolder, onChange, inputText, textValue, autofocusP, menuIsOpen, ...props }, ref) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    return (
+        <Form {...props}>
+            <Label {...props} errMsg={errMsg} >
+                {label}
+            </Label>
+            <div ref={ref.refForm}>
+                <InputBorder menuIsOpen={menuIsOpen}></InputBorder>
+                <TextBox
+                    {...props}
+                    onClick={!isSearchable ? onClick : menuIsOpen ? null : onClick} //if menu is close onClickon input open it. If open cannot close but type in it
+                >
+
+                    <div className="input-icon">
+                        {iconBefore}
+                    </div>
+                    <Input
+                        {...props}
+                        ref={ref.refInput}
+                        readOnly={readonly}
+                        onChange={onChange}
+                        value={value}
+                        placeholder={placeHolder}
+                        textValue={textValue} //for styling
+                        autoFocus={autofocusP}
+                        menuIsOpen={menuIsOpen}
+                        isSearchable={isSearchable}
+                        size='1'
+                    />
+                    {qtySelected > 1 && <StyledP menuIsOpen={menuIsOpen} isSearchable={isSearchable} style={{}}>& {qtySelected - 1} more</StyledP>}
+                    <div className="input-icon" onClick={onClick} style={{ padding: '10px 12px', alignSelf: 'stretch', alignItems: 'center', top: '0px', bottom: '0px', right: '0px', display: 'flex' }}>
+                        {iconAfter}
+                    </div>
+                </TextBox>
+                {!menuIsOpen && <div className='err-text'>{errMsg}</div>}
+            </div>
+        </Form>
+    )
+})
+
+TextBox.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Form.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Label.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+Input.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+TextInputClicableMS.propTypes = {
+    /**
+     * Theme props
+     */
+    theme: PropTypes.object,
+    /**
+     * Label of Input
+     */
+    label: PropTypes.string,
+    /**
+     * Is the input required?
+     */
+    required: PropTypes.bool,
+    /**
+     * Should label be inline?
+     */
+    labelInline: PropTypes.bool,
+    /**
+     * Is the input correct?
+     */
+    isValid: PropTypes.bool,
+    /**
+     * Error Message
+     */
+    errMsg: PropTypes.string,
+    /**
+     * Icon before input value
+     */
+    iconBefore: PropTypes.any,
+    /**
+     * Icon after input value
+     */
+    iconAfter: PropTypes.any,
+    /**
+     * Boolean to enable disable pointer style
+     */
+    isSearchable: PropTypes.bool,
+    /**
+     * Value of the item selected when > 1
+     */
+    qtySelected: PropTypes.number,
+    /**
+     * Click handler
+     */
+    onClick: PropTypes.func,
+    /**
+     *	Icon color
+     */
+    iconVariant: PropTypes.string,
+    /**
+     * Make input not editable
+     */
+    readonly: PropTypes.bool,
+    /**
+     * Value of the input
+     */
+    value: PropTypes.string,
+    /**
+     * Placeholder of the input
+     */
+    placeHolder: PropTypes.string,
+    /**
+     * Change handler
+     */
+    onChange: PropTypes.func,
+    /**
+     * Apply different style to the place holder
+     */
+    textValue: PropTypes.string,
+    /**
+     * Autofocus the input
+     */
+    autofocusP: PropTypes.bool,
+    /**
+     * Apply different style
+     */
+    menuIsOpen: PropTypes.bool,
+}
+
+TextInputClicableMS.defaultProps = {
+    theme: defaultThemeColor,
+    label: '',
+    required: false,
+    labelInline: false,
+    isValid: true,
+    errMsg: '',
+    iconBefore: null,
+    iconAfter: null,
+}
+
+export default TextInputClicableMS;

package/components/Inputs/TimeInput.js

@@ -0,0 +1,181 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled, { css, useTheme } from 'styled-components';
+import defaultThemeColor from '../constants/defaultThemeColor';
+
+const border = `#D4D7E3`;
+
+const TextBox = styled.div`
+    color: #A9B1B8;
+    font-size: 21px;
+    border: 1px solid ${({ theme, isValid }) => isValid ? border : theme.variant['error']};
+    border-radius: 4px;
+    padding: 5px;
+    display: inline-block;
+	align-items: center;
+    
+    &:focus-within {
+		border: 1px solid ${({ theme }) => theme.variant['primary-1']};
+        outline: none;
+    }
+`;
+
+TextBox.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const Input = styled.input`
+	border: 0;
+	outline: 0;
+	color: ${({ theme }) => theme.variant['primary-2']};
+	margin: 0 5px;
+	padding: 0;
+    font-size: 21px;
+    width: 24px;
+`;
+
+Input.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const requiredAsterisk = css`
+	&:after {
+		content:" *";
+		color: ${({ theme }) => theme.variant['error']};
+	}
+`
+
+const Label = styled.label`
+	display: block;
+	margin-bottom: ${({ labelInline, errMsg }) => (labelInline && errMsg) ? '18px' : '8px'};
+	margin-right: ${({ labelInline }) => labelInline ? '10px' : ''};
+    color: ${({ theme }) => theme.variant['neutral-2']};
+	${({ required }) => required ? requiredAsterisk : null}
+`;
+
+Label.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const inline = css`
+	display: flex;
+	align-items: center;
+`
+
+const Form = styled.div`
+	${({ labelInline }) => labelInline ? inline : null}
+	.err-text {
+		color: ${({ theme }) => theme.variant['error']};
+		margin-top: 5px;
+		font-size: 10px;
+	}
+
+	> div {
+		flex: 1 0 auto;
+	}
+`
+
+Form.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+const Button = styled.button`
+    border: none;
+    outline: none;
+    border-radius: 4px;
+    background-color: #F2F4FE;
+    color: #444;
+    padding: 5px 6px;
+    font-size: 18px;
+    cursor: pointer;
+`;
+
+Button.defaultProps = {
+    theme: defaultThemeColor,
+}
+
+export const TimeInput = ({ label, errMsg, hour, minute, period, onChange, ...props }) => {
+    const theme = useTheme() || defaultThemeColor;
+
+    function hourChange(evt) {
+        const num = evt.currentTarget.value>12? 12: parseFloat(evt.currentTarget.value) || 0;
+        onChange({ hour: num, minute, period });
+    }
+
+    function minuteChange(evt) {
+        console.log('minute change', evt.currentTarget.value);
+        const num = evt.currentTarget.value>59?59: parseFloat(evt.currentTarget.value) || 0;
+        onChange({ hour, minute: num, period });
+    }
+
+    function periodChange(evt) {
+        const p = period === 'AM' ? 'PM' : 'AM'
+        onChange({ hour, minute, period: p });
+    }
+
+    return (
+        <Form {...props}>
+            <Label {...props} errMsg={errMsg} >
+                {label}
+            </Label>
+            <div>
+                <TextBox
+                    {...props}
+                >
+                    <Input value={hour} onChange={hourChange} />
+                    :
+                    <Input value={minute} onChange={minuteChange} />
+                    <Button onClick={periodChange} >{period}</Button>
+                </TextBox>
+                <div className='err-text'>{errMsg}</div>
+            </div>
+        </Form>
+    )
+}
+
+TimeInput.propTypes = {
+    /**
+     *	Label of Input
+     */
+    label: PropTypes.string,
+    /**
+     *	Hour value
+     */
+    hour: PropTypes.number.isRequired,
+    /**
+     *	Minute value
+     */
+    minute: PropTypes.number.isRequired,
+    /**
+     *	AM or PM ?
+     */
+    period: PropTypes.string.isRequired,
+    /**
+     *	Is the input required?
+     */
+    required: PropTypes.bool,
+    /**
+     *	Should label be inline?
+     */
+    labelInline: PropTypes.bool,
+    /**
+     *	Is the input correct?
+     */
+    isValid: PropTypes.bool,
+    /**
+     *	Error Message
+     */
+    errMsg: PropTypes.string,
+}
+
+TimeInput.defaultProps = {
+    label: '',
+    hour: 0,
+    minute: 0,
+    period: 'AM',
+    required: false,
+    labelInline: false,
+    isValid: true,
+    errMsg: '',
+}
+