respond-framework/dist/modules/replayTools/App/Settings.js

create as fast you think

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.ModuleDropdown = void 0;
var _react5 = require("react");
var React = _react5;
var _respond = require("respond-framework/modules/replayTools/respond.js");
var _reactNative = require("react-native");
var _Button = require("../widgets/Button.js");
var _Input = require("../widgets/Input.js");
var _Radio = require("../widgets/Radio.js");
var _Dropdown = require("../widgets/Dropdown.js");
var _Link = require("../widgets/Link.js");
var _configDefault = require("../config.default.js");
var _ErrorField = require("../widgets/ErrorField.js");
const Settings = (0, _react5.memo)(function Settings(props) {
  return ((props, {
    events,
    focusedBranch,
    configs
  }) => {
    const urlInput = createSettings({
      url: _configDefault.default.url
    }, RespondSettingForm);
    const config = configs[focusedBranch];
    const settings = createSettings(config, UserSettingForm, events.edit);
    return /*#__PURE__*/React.createElement(_reactNative.View, {
      style: s.c
    }, /*#__PURE__*/React.createElement(_reactNative.View, {
      style: s.config
    }, /*#__PURE__*/React.createElement(ModuleDropdown, null), urlInput), /*#__PURE__*/React.createElement(_reactNative.View, {
      style: s.divider
    }), /*#__PURE__*/React.createElement(_reactNative.ScrollView, {
      style: s.scroll,
      showsVerticalScrollIndicator: false
    }, settings, /*#__PURE__*/React.createElement(_Link.default, {
      style: s.link,
      event: events.openPermalink
    }, "share settings permalink")), /*#__PURE__*/React.createElement(_Button.default, {
      text: "RELOAD",
      event: events.reload
    }));
  })(props, (0, _respond.useRespond)());
});
var _default = exports.default = Settings;
const createSettings = (config = {}, FormComponent, event) => {
  const fields = Object.keys(config);
  return fields.map((name, i) => {
    const c = config[name];
    const zIndex = fields.length - i; // so Dropdown menus are above subsequent dropdowns

    const Component = c.boolean ? _Radio.default : c.options ? _Dropdown.default : _Input.default;
    const props = {
      ...c,
      event,
      name,
      label: c.label ?? name,
      key: name,
      zIndex,
      Component
    };
    return /*#__PURE__*/React.createElement(FormComponent, props);
  });
};
const ModuleDropdown = exports.ModuleDropdown = (0, _react5.memo)(function ModuleDropdown(props) {
  return (({
    style
  }, {
    events,
    focusedBranch,
    respond
  }) => /*#__PURE__*/React.createElement(_Dropdown.default, {
    name: 'focusedBranch',
    event: events.changeBranch,
    value: focusedBranch,
    options: respond.branchNames.map(v => ({
      value: v,
      label: v || 'top'
    })),
    createLabel: o => 'module: ' + (o?.value || 'top'),
    style
  }))(props, (0, _respond.useRespond)());
});
const RespondSettingForm = (0, _react5.memo)(function RespondSettingForm(props) {
  return (({
    Component,
    name,
    options,
    ...props
  }, state) => {
    const {
      errors,
      events,
      config
    } = state;
    if (errors[name]) {
      const props = {
        event: events.removeError,
        name,
        message: errors[name]
      };
      return /*#__PURE__*/React.createElement(_ErrorField.default, props);
    }
    return /*#__PURE__*/React.createElement(Component, {
      ...props,
      name,
      event: events.editConfig,
      value: config[name],
      options: typeof options === 'function' ? options(config, state) : options || bools,
      zIndex: props.zIndex + 1000
    });
  })(props, (0, _respond.useRespond)());
});
const UserSettingForm = (0, _react5.memo)(function UserSettingForm(props) {
  return (({
    Component,
    name,
    available,
    options,
    ...props
  }, {
    settings,
    focusedBranch
  }) => {
    const modSettings = settings[focusedBranch];
    if (available && !available(modSettings)) return;
    return /*#__PURE__*/React.createElement(Component, {
      ...props,
      name,
      value: modSettings[name],
      options: typeof options === 'function' ? options(modSettings) : options || bools
    });
  })(props, (0, _respond.useRespond)());
});
const bools = [{
  value: true,
  text: 'True'
}, {
  value: false,
  text: 'False'
}];
const s = _reactNative.StyleSheet.create({
  c: {
    flex: 1
  },
  config: {
    zIndex: 1000,
    marginHorizontal: 10
  },
  scroll: {
    flex: 1,
    paddingHorizontal: 10,
    marginTop: -10
  },
  link: {
    alignItems: 'center',
    marginVertical: 10
  },
  divider: {
    height: 1,
    backgroundColor: 'rgba(149, 150, 153, .27)',
    marginHorizontal: 3,
    marginTop: 9,
    marginBottom: 10,
    marginHorizontal: 11
  }
});