bootstrap-rn 0.3.0 → 0.3.2

package/src/components/forms/FormCheck.js

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import { getStyles } from '../../utils';
+import FormCheckContext from './FormCheckContext';
+import FormCheckLabel from './FormCheckLabel';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  reverse: PropTypes.bool,
+  disabled: PropTypes.bool,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.form-check': css`
+    // display: block;
+    flex-direction: row; // added for bootstrap-rn
+    min-height: $form-check-min-height;
+    // padding-left: $form-check-padding-start;
+    margin-bottom: $form-check-margin-bottom;
+  `,
+  '.form-check-reverse': css`
+    flex-direction: row-reverse; // added for bootstrap-rn
+    // padding-right: $form-check-padding-start;
+    // padding-left: 0;
+    // text-align: right;
+  `,
+  '.form-switch.form-check': css`
+    // padding-left: $form-switch-padding-start;
+  `,
+});
+
+const FormCheck = React.forwardRef((props, ref) => {
+  const {
+    children,
+    reverse = false,
+    disabled = false,
+    valid = false,
+    invalid = false,
+    style,
+    ...elementProps
+  } = props;
+
+  const classes = getStyles(styles, [
+    '.form-check',
+    reverse && '.form-check-reverse',
+  ]);
+
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <FormCheckContext.Provider value={{ reverse, disabled, valid, invalid }}>
+        {children}
+      </FormCheckContext.Provider>
+    </View>
+  );
+});
+
+FormCheck.displayName = 'FormCheck';
+FormCheck.propTypes = propTypes;
+
+FormCheck.Label = FormCheckLabel;
+
+export default FormCheck;

package/src/components/forms/FormCheckContext.js

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const FormCheckContext = React.createContext();
+
+FormCheckContext.displayName = 'FormCheckContext';
+
+export default FormCheckContext;

package/src/components/forms/FormCheckInput.js

@@ -0,0 +1,247 @@
+import React, { useContext, useState } from 'react';
+import { Platform } from 'react-native';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles, each } from '../../utils';
+import useMedia from '../../hooks/useMedia';
+import useStyle from '../../hooks/useStyle';
+import useModifier from '../../hooks/useModifier';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import { escapeSvg } from '../../theme/functions';
+import FormCheckContext from './FormCheckContext';
+import FormCheckInputWeb from './internals/FormCheckInputWeb';
+import FormCheckInputNative from './internals/FormCheckInputNative';
+
+/* eslint-disable react/no-unused-prop-types */
+const propTypes = {
+  type: PropTypes.oneOf(['checkbox', 'radio', 'switch']).isRequired,
+  value: PropTypes.bool.isRequired,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  disabled: PropTypes.bool,
+  valid: PropTypes.bool,
+  invalid: PropTypes.bool,
+  useNativeComponent: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+};
+/* eslint-enable */
+
+const styles = StyleSheet.create({
+  '.form-check .form-check-input': css`
+    $height: $line-height-base * 1rem;
+    $margin-top-double: $height - $form-check-input-width;
+
+    // float: left;
+    // margin-left: $form-check-padding-start * -1;
+    margin-top: $margin-top-double * 0.5; // added for bootstrap-rn
+    margin-right: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn
+  `,
+  '.form-check-reverse .form-check-input': css`
+    // float: right;
+    // margin-right: $form-check-padding-start * -1;
+    margin-right: 0; // added for bootstrap-rn
+    // margin-left: 0;
+    margin-left: $form-check-padding-start - $form-check-input-width; // added for bootstrap-rn
+  `,
+  '.form-check-input': css`
+    width: $form-check-input-width;
+    height: $form-check-input-width;
+    // margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
+    vertical-align: top;
+    background-color: $form-check-input-bg;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+    border: $form-check-input-border;
+    @include platform(web) {
+      appearance: none;
+      user-select: none; // added for bootstrap-rn
+      color-adjust: exact; // Keep themed appearance for print
+    }
+    // @include transition($form-check-transition);
+
+    &:active {
+      // filter: $form-check-input-active-filter;
+    }
+
+    &:focus {
+      border-color: $form-check-input-focus-border;
+      @include platform(web) {
+        outline-width: 0; // outline: 0;
+        box-shadow: $form-check-input-focus-box-shadow;
+      }
+    }
+  `,
+  '.form-check-input[type="checkbox"]': css`
+    border-radius: $form-check-input-border-radius;
+  `,
+  '.form-check-input[type="radio"]': css`
+    border-radius: $form-check-radio-border-radius;
+  `,
+  '.form-check-input:checked': css`
+    background-color: $form-check-input-checked-bg-color;
+    border-color: $form-check-input-checked-border-color;
+  `,
+  '.form-check-input[type="checkbox"]:checked': css`
+    // @if $enable-gradients {
+    //   background-image: escape-svg($form-check-input-checked-bg-image), var(--#{$variable-prefix}gradient);
+    // } @else {
+    background-image: ${(t) =>
+      escapeSvg(t['form-check-input-checked-bg-image'])};
+    // }
+  `,
+  '.form-check-input[type="radio"]:checked': css`
+    // @if $enable-gradients {
+    //   background-image: escape-svg($form-check-radio-checked-bg-image), var(--#{$variable-prefix}gradient);
+    // } @else {
+    background-image: ${(t) =>
+      escapeSvg(t['form-check-radio-checked-bg-image'])};
+    // }
+  `,
+  '.form-check-input:disabled': css`
+    @include platform(web) {
+      pointer-events: none;
+      filter: none;
+    }
+    opacity: $form-check-label-disabled-opacity;
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data) => ({
+    [`.form-check-input:${state}`]: css`
+      border-color: ${(t) => data(t).color};
+
+      &:focus {
+        border-color: ${(t) => data(t).color}; // added for bootstrap-rn
+        @include platform(web) {
+          box-shadow: 0 0 $input-btn-focus-blur $input-focus-width
+            rgba(${(t) => data(t).color}, $input-btn-focus-color-opacity);
+        }
+      }
+    `,
+    [`.form-check-input:${state}:checked`]: css`
+      background-color: ${(t) => data(t).color};
+    `,
+  })),
+  '.form-switch.form-check .form-check-input': css`
+    // float: left;
+    // margin-left: $form-switch-padding-start * -1;
+    margin-right: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn
+  `,
+  '.form-switch.form-check-reverse .form-check-input': css`
+    // margin-right: $form-switch-padding-start * -1;
+    margin-right: 0; // added for bootstrap-rn
+    // margin-left: 0;
+    margin-left: $form-switch-padding-start - $form-switch-width; // added for bootstrap-rn
+  `,
+  '.form-switch .form-check-input': css`
+    width: $form-switch-width;
+    background-image: ${(t) => escapeSvg(t['form-switch-bg-image'])};
+    background-position: left center;
+    border-radius: $form-switch-border-radius;
+    // @include transition($form-switch-transition);
+
+    &:focus {
+      background-image: ${(t) => escapeSvg(t['form-switch-focus-bg-image'])};
+    }
+  `,
+  '.form-switch .form-check-input:checked': css`
+    background-position: $form-switch-checked-bg-position;
+
+    // @if $enable-gradients {
+    //   background-image: escape-svg($form-switch-checked-bg-image), var(--#{$prefix}gradient);
+    // } @else {
+    background-image: ${(t) => escapeSvg(t['form-switch-checked-bg-image'])};
+    // }
+
+    &:focus {
+      background-image: ${(t) =>
+        escapeSvg(t['form-switch-checked-bg-image'])}; // added for bootstrap-rn
+    }
+  `,
+});
+
+const FormCheckInput = React.forwardRef((props, ref) => {
+  const [modifierProps, modifierRef] = useModifier('useFormField', props, ref);
+
+  const context = useContext(FormCheckContext);
+
+  const {
+    type,
+    value,
+    onFocus = () => {},
+    onBlur = () => {},
+    disabled = context ? context.disabled : false,
+    valid = context ? context.valid : false,
+    invalid = context ? context.invalid : false,
+    useNativeComponent = false,
+    autoFocus = false,
+    style,
+    ...elementProps
+  } = modifierProps;
+
+  const media = useMedia();
+  const [focused, setFocused] = useState(autoFocus);
+
+  const classes = getStyles(styles, [
+    context && '.form-check .form-check-input',
+    context?.reverse && '.form-check-reverse .form-check-input',
+    '.form-check-input',
+    type === 'checkbox' && '.form-check-input[type="checkbox"]',
+    type === 'radio' && '.form-check-input[type="radio"]',
+    value && '.form-check-input:checked',
+    type === 'checkbox' &&
+      value &&
+      '.form-check-input[type="checkbox"]:checked',
+    type === 'radio' && value && '.form-check-input[type="radio"]:checked',
+    disabled && '.form-check-input:disabled',
+    // validation
+    valid && '.form-check-input:valid',
+    valid && value && '.form-check-input:valid:checked',
+    invalid && '.form-check-input:invalid',
+    invalid && value && '.form-check-input:invalid:checked',
+    // switch
+    context && type === 'switch' && '.form-switch.form-check .form-check-input',
+    context?.reverse &&
+      type === 'switch' &&
+      '.form-switch.form-check-reverse .form-check-input',
+    type === 'switch' && '.form-switch .form-check-input',
+    type === 'switch' && value && '.form-switch .form-check-input:checked',
+  ]);
+
+  const resolveStyle = useStyle([classes, style]);
+
+  const BaseFormCheckInput =
+    Platform.OS === 'web' && !useNativeComponent
+      ? FormCheckInputWeb
+      : FormCheckInputNative;
+
+  return (
+    <BaseFormCheckInput
+      {...elementProps}
+      ref={modifierRef}
+      type={type}
+      value={value}
+      onFocus={() => {
+        setFocused(true);
+        onFocus();
+      }}
+      onBlur={() => {
+        setFocused(false);
+        onBlur();
+      }}
+      disabled={disabled}
+      autoFocus={autoFocus}
+      style={resolveStyle({
+        media,
+        interaction: { focus: focused, focusVisible: focused },
+      })}
+    />
+  );
+});
+
+FormCheckInput.displayName = 'FormCheckInput';
+FormCheckInput.propTypes = propTypes;
+
+export default FormCheckInput;

package/src/components/forms/FormCheckLabel.js

@@ -0,0 +1,76 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import { getStyles, each } from '../../utils';
+import Label from '../Label';
+import { FORM_VALIDATION_STATES } from '../../theme/proxies';
+import useForcedContext from '../../hooks/useForcedContext';
+import FormCheckContext from './FormCheckContext';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.form-check-input:disabled ~ .form-check-label': css`
+    @include platform(web) {
+      cursor: default;
+    }
+    opacity: $form-check-label-disabled-opacity;
+  `,
+  '.form-check-label': css`
+    flex-shrink: 1; // added for bootstrap-rn
+
+    @include platform(web) {
+      cursor: $form-check-label-cursor;
+    }
+  `,
+  '.form-check-label --text': css`
+    color: $form-check-label-color;
+  `,
+  ...each(FORM_VALIDATION_STATES, (state, data) => ({
+    [`.form-check-input:${state} ~ .form-check-label --text`]: css`
+      color: ${(t) => data(t).color};
+    `,
+  })),
+});
+
+const FormCheckLabel = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const { disabled, valid, invalid } = useForcedContext(FormCheckContext);
+
+  const classes = getStyles(styles, [
+    disabled && '.form-check-input:disabled ~ .form-check-label',
+    '.form-check-label',
+  ]);
+
+  const textClasses = getStyles(styles, [
+    '.form-check-label --text',
+    // validation
+    valid && '.form-check-input:valid ~ .form-check-label --text',
+    invalid && '.form-check-input:invalid ~ .form-check-label --text',
+  ]);
+
+  return (
+    <Label
+      {...elementProps}
+      ref={ref}
+      disabled={disabled}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Label>
+  );
+});
+
+FormCheckLabel.displayName = 'FormCheckLabel';
+FormCheckLabel.propTypes = propTypes;
+
+export default FormCheckLabel;

package/src/components/forms/FormLabel.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import Label from '../Label';
+import { getStyles } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.form-label': css`
+    margin-bottom: $form-label-margin-bottom;
+  `,
+  '.form-label --text': css`
+    font-size: $form-label-font-size;
+    line-height: $form-label-font-size * $line-height-base; // added for bootstrap-rn
+    font-style: $form-label-font-style;
+    font-weight: $form-label-font-weight;
+    color: $form-label-color;
+  `,
+});
+
+const FormLabel = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.form-label']);
+  const textClasses = getStyles(styles, ['.form-label --text']);
+
+  return (
+    <Label
+      {...elementProps}
+      ref={ref}
+      style={[classes, style]}
+      textStyle={[textClasses, textStyle]}
+    >
+      {children}
+    </Label>
+  );
+});
+
+FormLabel.displayName = 'FormLabel';
+FormLabel.propTypes = propTypes;
+
+export default FormLabel;

package/src/components/forms/FormText.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from '../../style/StyleSheet';
+import css from '../../style/css';
+import View from '../View';
+import Text from '../Text';
+import { getStyles } from '../../utils';
+
+const propTypes = {
+  children: PropTypes.node.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.any,
+  // eslint-disable-next-line react/forbid-prop-types
+  textStyle: PropTypes.any,
+};
+
+const styles = StyleSheet.create({
+  '.form-text': css`
+    margin-top: $form-text-margin-top;
+  `,
+  '.form-text --text': css`
+    font-size: $form-text-font-size;
+    font-style: $form-text-font-style;
+    font-weight: $form-text-font-weight;
+    color: $form-text-color;
+  `,
+});
+
+const FormText = React.forwardRef((props, ref) => {
+  const { children, style, textStyle, ...elementProps } = props;
+
+  const classes = getStyles(styles, ['.form-text']);
+  const textClasses = getStyles(styles, ['.form-text --text']);
+
+  // composite component
+  return (
+    <View {...elementProps} ref={ref} style={[classes, style]}>
+      <Text style={[textClasses, textStyle]}>{children}</Text>
+    </View>
+  );
+});
+
+FormText.displayName = 'FormText';
+FormText.propTypes = propTypes;
+
+export default FormText;