react95-native/dist/commonjs/components/ColorPicker/ColorPicker.js

Refreshed Windows 95 style UI components for your React Native app

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _reactNative = require("react-native");

var _theming = require("../../core/theming");

var _styleElements = require("../../styles/styleElements");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const colorPreviewSize = 34; // eslint-disable-next-line @typescript-eslint/no-explicit-any

function chunk(arr, chunkSize) {
  const R = [];

  for (let i = 0, len = arr.length; i < len; i += chunkSize) R.push(arr.slice(i, i + chunkSize));

  return R;
}

const ColorPicker = ({
  colors,
  colorsPerRow = 5,
  onChange,
  style,
  theme,
  value,
  wide = false,
  ...rest
}) => {
  const handleColorPress = v => {
    onChange === null || onChange === void 0 ? void 0 : onChange(v);
  };

  const rows = chunk(colors, colorsPerRow);
  return /*#__PURE__*/_react.default.createElement(_reactNative.View, _extends({
    style: style
  }, rest), rows.map((rowColors, i) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
    style: styles.row,
    key: i
  }, rowColors.map(color => {
    // TODO: pick more visible cborders olors for selected item
    const isSelected = color === value;
    return /*#__PURE__*/_react.default.createElement(_reactNative.TouchableHighlight, {
      key: color,
      onPress: () => handleColorPress(color),
      style: [styles.colorPreview, {
        width: (wide ? 1.4 : 1) * colorPreviewSize,
        height: colorPreviewSize,
        borderWidth: 2,
        borderColor: isSelected ? theme.materialText : 'transparent'
      }]
    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        flex: 1,
        backgroundColor: color,
        borderWidth: isSelected ? 2 : 0,
        borderColor: theme.canvas
      }
    }, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
      style: {
        flex: 1,
        borderWidth: isSelected ? 2 : 0,
        borderColor: theme.materialText
      }
    }, !isSelected && /*#__PURE__*/_react.default.createElement(_styleElements.Border, {
      variant: "cutout",
      theme: theme
    }))));
  }))));
};

const styles = _reactNative.StyleSheet.create({
  row: {
    flexDirection: 'row'
  },
  colorPreview: {
    width: colorPreviewSize,
    height: colorPreviewSize
  }
});

var _default = (0, _theming.withTheme)(ColorPicker);

exports.default = _default;
//# sourceMappingURL=ColorPicker.js.map