function createInstance(defaultConfig) {
  var context = new Axios(defaultConfig);
  var instance = bind(Axios.prototype.request, context);

  // Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);

  // Copy context to instance
  utils.extend(instance, context);

  return instance;
}

function
createInstance
(
defaultConfig
)
{
var
context
=
new
Axios
(
defaultConfig
)
;
var
instance
=
bind
(
Axios
.
prototype
.
request
,
context
)
;
// Copy axios.prototype to instance
utils
.
extend
(
instance
,
Axios
.
prototype
,
context
)
;
// Copy context to instance
utils
.
extend
(
instance
,
context
)
;
return
instance
;
}

Create an instance of Axios

@param {Object} defaultConfig The default config for the instance
@return {Axios} A new instance of Axios


function CancelToken(executor) {
  if (typeof executor !== 'function') {
    throw new TypeError('executor must be a function.');
  }

  var resolvePromise;
  this.promise = new Promise(function promiseExecutor(resolve) {
    resolvePromise = resolve;
  });

  var token = this;
  executor(function cancel(message) {
    if (token.reason) {
      // Cancellation has already been requested
      return;
    }

    token.reason = new Cancel(message);
    resolvePromise(token.reason);
  });
}

A `CancelToken` is an object that can be used to request cancellation of an operation.

@class
@param {Function} executor The executor function.

A CancelToken is an object that can be used to request cancellation of an operation .


function isArrayBufferView(val) {
  var result;
  if ((typeof ArrayBuffer !== 'undefined') && (ArrayBuffer.isView)) {
    result = ArrayBuffer.isView(val);
  } else {
    result = (val) && (val.buffer) && (val.buffer instanceof ArrayBuffer);
  }
  return result;
}

function isArrayBufferView ( val ) { var result ; if ( ( typeof ArrayBuffer !== 'undefined' ) && ( ArrayBuffer . isView ) ) { result = ArrayBuffer . isView ( val ) ; } else { result = ( val ) && ( val . buffer ) && ( val . buffer instanceof ArrayBuffer ) ; } return result ; }

Determine if a value is a view on an ArrayBuffer

@param {Object} val The value to test
@returns {boolean} True if value is a view on an ArrayBuffer, otherwise false


function isStandardBrowserEnv() {
  if (typeof navigator !== 'undefined' && (navigator.product === 'ReactNative' ||
                                           navigator.product === 'NativeScript' ||
                                           navigator.product === 'NS')) {
    return false;
  }
  return (
    typeof window !== 'undefined' &&
    typeof document !== 'undefined'
  );
}

function isStandardBrowserEnv ( ) { if ( typeof navigator !== 'undefined' && ( navigator . product === 'ReactNative' || navigator . product === 'NativeScript' || navigator . product === 'NS' ) ) { return false ; } return ( typeof window !== 'undefined' && typeof document !== 'undefined' ) ; }

Determine if we're running in a standard browser environment

This allows axios to run in a web worker, and react-native.
Both environments support XMLHttpRequest, but not fully standard globals.

web workers:
typeof window -> undefined
typeof document -> undefined

react-native:
navigator.product -> 'ReactNative'
nativescript
navigator.product -> 'NativeScript' or 'NS'

Determine if we re running in a standard browser environment


function forEach(obj, fn) {
  // Don't bother if no value provided
  if (obj === null || typeof obj === 'undefined') {
    return;
  }

  // Force an array if not already something iterable
  if (typeof obj !== 'object') {
    /*eslint no-param-reassign:0*/
    obj = [obj];
  }

  if (isArray(obj)) {
    // Iterate over array values
    for (var i = 0, l = obj.length; i < l; i++) {
      fn.call(null, obj[i], i, obj);
    }
  } else {
    // Iterate over object keys
    for (var key in obj) {
      if (Object.prototype.hasOwnProperty.call(obj, key)) {
        fn.call(null, obj[key], key, obj);
      }
    }
  }
}

Iterate over an Array or an Object invoking a function for each item.

If `obj` is an Array callback will be called passing
the value, index, and complete array for each item.

If 'obj' is an Object callback will be called passing
the value, key, and complete object for each property.

@param {Object|Array} obj The object to iterate
@param {Function} fn The callback to invoke for each item

Iterate over an Array or an Object invoking a function for each item .


function extend(a, b, thisArg) {
  forEach(b, function assignValue(val, key) {
    if (thisArg && typeof val === 'function') {
      a[key] = bind(val, thisArg);
    } else {
      a[key] = val;
    }
  });
  return a;
}

function extend ( a , b , thisArg ) { forEach ( b , function assignValue ( val , key ) { if ( thisArg && typeof val === 'function' ) { a [ key ] = bind ( val , thisArg ) ; } else { a [ key ] = val ; } } ) ; return a ; }

Extends object a by mutably adding to it the properties of object b.

@param {Object} a The object to be extended
@param {Object} b The object to copy properties from
@param {Object} thisArg The object to bind function to
@return {Object} The resulting value of object a

Extends object a by mutably adding to it the properties of object b .


function writePackageManifest (packageName) {
  const packagePath = require.resolve(packageName + '/package.json')
  let { name, main, author, license, types, typings } = require(packagePath)
  if (!main) {
    main = 'index.js'
  }

  let typesFile = types || typings
  if (typesFile) {
    typesFile = require.resolve(join(packageName, typesFile))
  }

  const compiledPackagePath = join(__dirname, `dist/compiled/${packageName}`)

  const potentialLicensePath = join(dirname(packagePath), './LICENSE')
  if (existsSync(potentialLicensePath)) {
    this._.files.push({
      dir: compiledPackagePath,
      base: 'LICENSE',
      data: readFileSync(potentialLicensePath, 'utf8')
    })
  }

  this._.files.push({
    dir: compiledPackagePath,
    base: 'package.json',
    data:
      JSON.stringify(
        Object.assign(
          {},
          { name, main: `${basename(main, '.' + extname(main))}` },
          author ? { author } : undefined,
          license ? { license } : undefined,
          typesFile
            ? {
              types: relative(compiledPackagePath, typesFile)
            }
            : undefined
        )
      ) + '\n'
  })
}

function writePackageManifest ( packageName ) { const packagePath = require . resolve ( packageName + '/package.json' ) let { name , main , author , license , types , typings } = require ( packagePath ) if ( ! main ) { main = 'index.js' } let typesFile = types || typings if ( typesFile ) { typesFile = require . resolve ( join ( packageName , typesFile ) ) } const compiledPackagePath = join ( __dirname , ` ${ packageName } ` ) const potentialLicensePath = join ( dirname ( packagePath ) , './LICENSE' ) if ( existsSync ( potentialLicensePath ) ) { this . _ . files . push ( { dir : compiledPackagePath , base : 'LICENSE' , data : readFileSync ( potentialLicensePath , 'utf8' ) } ) } this . _ . files . push ( { dir : compiledPackagePath , base : 'package.json' , data : JSON . stringify ( Object . assign ( { } , { name , main : ` ${ basename ( main , '.' + extname ( main ) ) } ` } , author ? { author } : undefined , license ? { license } : undefined , typesFile ? { types : relative ( compiledPackagePath , typesFile ) } : undefined ) ) + '\n' } ) }

This function writes a minimal `package.json` file for a compiled package. It defines `name`, `main`, `author`, and `license`. It also defines `types`. n.b. types intended for development usage only.

This function writes a minimal package . json file for a compiled package . It defines name main author and license . It also defines types . n . b . types intended for development usage only .


function processMessage (e) {
  const obj = JSON.parse(e.data)
  switch (obj.action) {
    case 'building': {
      console.log(
        '[HMR] bundle ' + (obj.name ? "'" + obj.name + "' " : '') +
        'rebuilding'
      )
      break
    }
    case 'built':
    case 'sync': {
      clearOutdatedErrors()

      if (obj.hash) {
        handleAvailableHash(obj.hash)
      }

      if (obj.warnings.length > 0) {
        handleWarnings(obj.warnings)
      }

      if (obj.errors.length > 0) {
        // When there is a compilation error coming from SSR we have to reload the page on next successful compile
        if (obj.action === 'sync') {
          hadRuntimeError = true
        }
        handleErrors(obj.errors)
        break
      }

      handleSuccess()
      break
    }
    default: {
      if (customHmrEventHandler) {
        customHmrEventHandler(obj)
        break
      }
      break
    }
  }
}


async function tryApplyUpdates (onHotUpdateSuccess) {
  if (!module.hot) {
    // HotModuleReplacementPlugin is not in Webpack configuration.
    console.error('HotModuleReplacementPlugin is not in Webpack configuration.')
    // window.location.reload();
    return
  }

  if (!isUpdateAvailable() || !canApplyUpdates()) {
    return
  }

  function handleApplyUpdates (err, updatedModules) {
    if (err || hadRuntimeError) {
      if (err) {
        console.warn('Error while applying updates, reloading page', err)
      }
      if (hadRuntimeError) {
        console.warn('Had runtime error previously, reloading page')
      }
      window.location.reload()
      return
    }

    if (typeof onHotUpdateSuccess === 'function') {
      // Maybe we want to do something.
      onHotUpdateSuccess()
    }

    if (isUpdateAvailable()) {
      // While we were updating, there was a new update! Do it again.
      tryApplyUpdates()
    }
  }

  // https://webpack.github.io/docs/hot-module-replacement.html#check
  try {
    const updatedModules = await module.hot.check(/* autoApply */ {
      ignoreUnaccepted: true
    })
    if (updatedModules) {
      handleApplyUpdates(null, updatedModules)
    }
  } catch (err) {
    handleApplyUpdates(err, null)
  }
}

Attempt to update code on the fly, fall back to a hard reload.

Attempt to update code on the fly fall back to a hard reload .


async function tryApplyUpdates () {
  if (!isUpdateAvailable() || !canApplyUpdates()) {
    return
  }
  try {
    const res = await fetch(`${hotUpdatePath}${curHash}.hot-update.json`)
    const data = await res.json()
    const curPage = page === '/' ? 'index' : page
    const pageUpdated = Object.keys(data.c)
      .some(mod => {
        return (
          mod.indexOf(`pages${curPage.substr(0, 1) === '/' ? curPage : `/${curPage}`}`) !== -1 ||
          mod.indexOf(`pages${curPage.substr(0, 1) === '/' ? curPage : `/${curPage}`}`.replace(/\//g, '\\')) !== -1
        )
      })

    if (pageUpdated) {
      document.location.reload(true)
    } else {
      curHash = mostRecentHash
    }
  } catch (err) {
    console.error('Error occurred checking for update', err)
    document.location.reload(true)
  }
}

async
function
tryApplyUpdates
(
)
{
if
(
!
isUpdateAvailable
(
)
||
!
canApplyUpdates
(
)
)
{
return
}
try
{
const
res
=
await
fetch
(
`
${
hotUpdatePath
}
${
curHash
}
`
)
const
data
=
await
res
.
json
(
)
const
curPage
=
page
===
'/'
'index'
:
page
const
pageUpdated
=
Object
.
keys
(
data
.
c
)
.
some
(
mod
=>
{
return
(
mod
.
indexOf
(
`
${
curPage
.
substr
(
0
,
1
)
===
'/'
curPage
:
`
${
curPage
}
`
}
`
)
!==
1
||
mod
.
indexOf
(
`
${
curPage
.
substr
(
0
,
1
)
===
'/'
curPage
:
`
${
curPage
}
`
}
`
.
replace
(
/
\/
/
g
,
'\\'
)
)
!==
1
)
}
)
if
(
pageUpdated
)
{
document
.
location
.
reload
(
true
)
}
else
{
curHash
=
mostRecentHash
}
}
catch
(
err
)
{
console
.
error
(
'Error occurred checking for update'
,
err
)
document
.
location
.
reload
(
true
)
}
}

This function reads code updates on the fly and hard reloads the page when it has changed.

This function reads code updates on the fly and hard reloads the page when it has changed .


function formatMessage (message, isError) {
  let lines = message.split('\n')

  // Strip Webpack-added headers off errors/warnings
  // https://github.com/webpack/webpack/blob/master/lib/ModuleError.js
  lines = lines.filter(line => !/Module [A-z ]+\(from/.test(line))

  // Transform parsing error into syntax error
  // TODO: move this to our ESLint formatter?
  lines = lines.map(line => {
    const parsingError = /Line (\d+):(?:(\d+):)?\s*Parsing error: (.+)$/.exec(
      line
    )
    if (!parsingError) {
      return line
    }
    const [, errorLine, errorColumn, errorMessage] = parsingError
    return `${friendlySyntaxErrorLabel} ${errorMessage} (${errorLine}:${errorColumn})`
  })

  message = lines.join('\n')
  // Smoosh syntax errors (commonly found in CSS)
  message = message.replace(
    /SyntaxError\s+\((\d+):(\d+)\)\s*(.+?)\n/g,
    `${friendlySyntaxErrorLabel} $3 ($1:$2)\n`
  )
  // Remove columns from ESLint formatter output (we added these for more
  // accurate syntax errors)
  message = message.replace(/Line (\d+):\d+:/g, 'Line $1:')
  // Clean up export errors
  message = message.replace(
    /^.*export '(.+?)' was not found in '(.+?)'.*$/gm,
    `Attempted import error: '$1' is not exported from '$2'.`
  )
  message = message.replace(
    /^.*export 'default' \(imported as '(.+?)'\) was not found in '(.+?)'.*$/gm,
    `Attempted import error: '$2' does not contain a default export (imported as '$1').`
  )
  message = message.replace(
    /^.*export '(.+?)' \(imported as '(.+?)'\) was not found in '(.+?)'.*$/gm,
    `Attempted import error: '$1' is not exported from '$3' (imported as '$2').`
  )
  lines = message.split('\n')

  // Remove leading newline
  if (lines.length > 2 && lines[1].trim() === '') {
    lines.splice(1, 1)
  }
  // Clean up file name
  lines[0] = lines[0].replace(/^(.*) \d+:\d+-\d+$/, '$1')

  // Cleans up verbose "module not found" messages for files and packages.
  if (lines[1] && lines[1].indexOf('Module not found: ') === 0) {
    lines = [
      lines[0],
      lines[1]
        .replace('Error: ', '')
        .replace('Module not found: Cannot find file:', 'Cannot find file:')
    ]
  }

  message = lines.join('\n')
  // Internal stacks are generally useless so we strip them... with the
  // exception of stacks containing `webpack:` because they're normally
  // from user code generated by Webpack. For more information see
  // https://github.com/facebook/create-react-app/pull/1050
  message = message.replace(
    /^\s*at\s((?!webpack:).)*:\d+:\d+[\s)]*(\n|$)/gm,
    ''
  ) // at ... ...:x:y
  message = message.replace(/^\s*at\s<anonymous>(\n|$)/gm, '') // at <anonymous>
  lines = message.split('\n')

  // Remove duplicated newlines
  lines = lines.filter(
    (line, index, arr) =>
      index === 0 || line.trim() !== '' || line.trim() !== arr[index - 1].trim()
  )

  // Reassemble the message
  message = lines.join('\n')
  return message.trim()
}

Cleans up webpack error messages. eslint-disable-next-line no-unused-vars

Cleans up webpack error messages . eslint - disable - next - line no - unused - vars


function UDecimalPad(num, precision) {
    var value = UDecimalString(num);
    assert.equal("number", typeof precision === 'undefined' ? 'undefined' : (0, _typeof3.default)(precision), "precision");

    var part = value.split(".");

    if (precision === 0 && part.length === 1) {
        return part[0];
    }

    if (part.length === 1) {
        return part[0] + '.' + "0".repeat(precision);
    } else {
        var pad = precision - part[1].length;
        assert(pad >= 0, 'decimal \'' + value + '\' exceeds precision ' + precision);
        return part[0] + '.' + part[1] + "0".repeat(pad);
    }
}

function
UDecimalPad
(
num
,
precision
)
{
var
value
=
UDecimalString
(
num
)
;
assert
.
equal
(
"number"
,
typeof
precision
===
'undefined'
'undefined'
:
(
0
,
_typeof3
.
default
)
(
precision
)
,
"precision"
)
;
var
part
=
value
.
split
(
"."
)
;
if
(
precision
===
0
&&
part
.
length
===
1
)
{
return
part
[
0
]
;
}
if
(
part
.
length
===
1
)
{
return
part
[
0
]
+
'.'
+
"0"
.
repeat
(
precision
)
;
}
else
{
var
pad
=
precision
part
[
1
]
.
length
;
assert
(
pad
>=
0
,
'decimal \''
+
value
+
'\' exceeds precision '
+
precision
)
;
return
part
[
0
]
+
'.'
+
part
[
1
]
+
"0"
.
repeat
(
pad
)
;
}
}

Ensure a fixed number of decimal places.  Safe for large numbers.

@see ./format.test.js

@example UDecimalPad(10.2, 3) === '10.200'

@arg {number|string|object.toString} value
@arg {number} precision - number of decimal places
@return {string} decimal part is added and zero padded to match precision

Ensure a fixed number of decimal places . Safe for large numbers .


function parseSegment(buffer, offset) {
    let typeKey = buffer[offset];

    if (typeKey <= 20) {
        if (buffer[offset + 1] == undefined) throw new Error("ParseError: No value for uint8");
        return { typeKey: typeKey, value: buffer[offset + 1], bufferLength: 2 };
    }
    if (typeKey <= 40) {
        if (buffer[offset + 2] == undefined) throw new Error("ParseError: Incomplete value for uint16");
        return { typeKey: typeKey, value: buffer.readUInt16BE(offset + 1), bufferLength: 3 };
    }
    else if (typeKey <= 90) {
        if (buffer[offset + 4] == undefined) throw new Error("ParseError: Incomplete value for uint32");
        return { typeKey: typeKey, value: buffer.readUInt32BE(offset + 1), bufferLength: 5 };
    }
    else if (typeKey <= 155) {
        if (buffer[offset + 1] == undefined) throw new Error("ParseError: Incomplete length value for string");
        let len = buffer.readUInt8(offset + 1);
        if (buffer[offset + 1 + len] == undefined) throw new Error("ParseError: Incomplete value for string");
        let value = buffer.toString("utf8", offset + 2, offset + 2 + len);

        return { typeKey: typeKey, value: value, bufferLength: 2 + len };
    }
    else if (typeKey <= 165) {
        if (buffer[offset + 16] == undefined) throw new Error("ParseError: Incomplete value for uuid");
        let len = 16;
        let value = new Buffer(len);
        buffer.copy(value, 0, offset + 1, offset + 1 + len);

        return { typeKey: typeKey, value: value, bufferLength: 1 + len };
    }
    else if (typeKey <= 180) {
        if (buffer[offset + 1] == undefined) throw new Error("ParseError: Incomplete length value for byte string");
        let len = buffer.readUInt8(offset + 1);
        if (buffer[offset + len + 1] == undefined) throw new Error("ParseError: Incomplete value for byte string");
        let value = new Buffer(len);
        buffer.copy(value, 0, offset + 2, offset + 2 + len);

        return { typeKey: typeKey, value: value, bufferLength: 2 + len };
    }
    else {
        throw new Error("typeKey not supported");
    }
}

Parse a segment and convert it into json.
@param {Buffer} buffer
@param {number} offset

Parse a segment and convert it into json .


function parseSegments(buffer) {
    if (buffer.length == 0) throw new Error("bad segments stream");

    let pointer = 0;
    let segments = [ ];

    while (pointer < buffer.length) {
        let seg = parseSegment(buffer, pointer);
        segments.push(seg);
        pointer += seg.bufferLength;
        delete seg.bufferLength;
    }

    if (pointer != buffer.length) {
        throw new Error("Bad / incomplete segments");
    }

    return segments;
}

function
parseSegments
(
buffer
)
{
if
(
buffer
.
length
==
0
)
throw
new
Error
(
"bad segments stream"
)
;
let
pointer
=
0
;
let
segments
=
[
]
;
while
(
pointer
<
buffer
.
length
)
{
let
seg
=
parseSegment
(
buffer
,
pointer
)
;
segments
.
push
(
seg
)
;
pointer
+=
seg
.
bufferLength
;
delete
seg
.
bufferLength
;
}
if
(
pointer
!=
buffer
.
length
)
{
throw
new
Error
(
"Bad / incomplete segments"
)
;
}
return
segments
;
}

Parse a buffer to a array of segments
@param {Buffer} buffer


function parseQRCode(text, options) {
    if (text.length < 3 || text.length > 2000) throw new Error("Invalid length of EvtLink");

    let textSplited = text.split("_");
    if (textSplited.length > 2) return null;

    let rawText;

    if (textSplited[0].startsWith(qrPrefix)) {
        rawText = textSplited[0].substr(qrPrefix.length);
    }
    else {
        rawText = textSplited[0];
    }

    // decode segments base42
    let segmentsBytes = EvtLink.dec2b(rawText);
    if (segmentsBytes.length < 2) throw new Error("no flag in segment");
    let flag = segmentsBytes.readInt16BE(0);

    if ((flag & 1) == 0) { // check version of EvtLink
        throw new Error("The EvtLink is invalid or its version is newer than version 1 and is not supported by evtjs yet");
    }
    let segmentsBytesRaw = new Buffer(segmentsBytes.length - 2);
    segmentsBytes.copy(segmentsBytesRaw, 0, 2, segmentsBytes.length);

    let publicKeys = [ ];
    let signatures = [ ];

    if (textSplited[1]) {
        let buf = EvtLink.dec2b(textSplited[1]);
        let i = 0;

        if (buf.length % 65 !== 0) {
            throw new Error("length of signature is invalid");
        }

        while (i * 65 < buf.length) {
            let current = new Buffer(65);
            buf.copy(current, 0, i * 65, i * 65 + 65);
            let signature = ecc.Signature.fromBuffer(current);
            signatures.push(signature.toString());

            if (!options || options.recoverPublicKeys) {
                publicKeys.push(signature.recover(segmentsBytes).toString());
            }

            ++i;
        }
    }

    return { flag, segments: parseSegments(segmentsBytesRaw), publicKeys, signatures };
}

Parse a everiToken's QRCode Text
@param {string} text


async function __calcKeyProvider(keyProvider) {
    if (!keyProvider) { return []; }

    // if keyProvider is function
    if (keyProvider.apply && keyProvider.call) {
        keyProvider = keyProvider();
    }

    // resolve for Promise
    keyProvider = await Promise.resolve(keyProvider);

    if (!Array.isArray(keyProvider)) {
        keyProvider = [ keyProvider ];
    }

    for (let key of keyProvider) {
        if (!EvtKey.isValidPrivateKey(key)) {
            throw new Error("Invalid private key");
        }
    }

    return keyProvider;
}

async
function
__calcKeyProvider
(
keyProvider
)
{
if
(
!
keyProvider
)
{
return
[
]
;
}
// if keyProvider is function
if
(
keyProvider
.
apply
&&
keyProvider
.
call
)
{
keyProvider
=
keyProvider
(
)
;
}
// resolve for Promise
keyProvider
=
await
Promise
.
resolve
(
keyProvider
)
;
if
(
!
Array
.
isArray
(
keyProvider
)
)
{
keyProvider
=
[
keyProvider
]
;
}
for
(
let
key
of
keyProvider
)
{
if
(
!
EvtKey
.
isValidPrivateKey
(
key
)
)
{
throw
new
Error
(
"Invalid private key"
)
;
}
}
return
keyProvider
;
}

Calculate the value of keyProvider
@param {string | string[] | function} keyProvider
@returns {string[]}


function random32ByteBuffer({cpuEntropyBits = 0, safe = true} = {}) {
    assert.equal(typeof cpuEntropyBits, "number", "cpuEntropyBits");
    assert.equal(typeof safe, "boolean", "boolean");

    if(safe) {
        assert(entropyCount >= 128, "Call initialize() to add entropy (current: " + entropyCount + ")");
    }

    // if(entropyCount > 0) {
    //     console.log(`Additional private key entropy: ${entropyCount} events`)
    // }

    const hash_array = [];
    hash_array.push(randomBytes(32));
    hash_array.push(Buffer.from(cpuEntropy(cpuEntropyBits)));
    hash_array.push(externalEntropyArray);
    hash_array.push(browserEntropy());
    return hash.sha256(Buffer.concat(hash_array));
}

Additional forms of entropy are used.  A week random number generator can run out of entropy.  This should ensure even the worst random number implementation will be reasonably safe.

@arg {number} [cpuEntropyBits = 0] generate entropy on the fly.  This is
not required, entropy can be added in advanced via addEntropy or initialize().

@arg {boolean} [safe = true] false for testing, otherwise this will be
true to ensure initialize() was called.

@return a random buffer obtained from the secure random number generator.  Additional entropy is used.

Additional forms of entropy are used . A week random number generator can run out of entropy . This should ensure even the worst random number implementation will be reasonably safe .


function addEntropy(...ints) {
    assert.equal(externalEntropyArray.length, 101, "externalEntropyArray");

    entropyCount += ints.length;
    for(const i of ints) {
        const pos = entropyPos++ % 101;
        const i2 = externalEntropyArray[pos] += i;
        if(i2 > 9007199254740991)
            externalEntropyArray[pos] = 0;
    }
}

function addEntropy ( ... ints ) { assert . equal ( externalEntropyArray . length , 101 , "externalEntropyArray" ) ; entropyCount += ints . length ; for ( const i of ints ) { const pos = entropyPos ++ % 101 ; const i2 = externalEntropyArray [ pos ] += i ; if ( i2 > 9007199254740991 ) externalEntropyArray [ pos ] = 0 ; } }

Adds entropy.  This may be called many times while the amount of data saved
is accumulatively reduced to 101 integers.  Data is retained in RAM for the
life of this module.

@example React <code>
componentDidMount() {
this.refs.MyComponent.addEventListener("mousemove", this.onEntropyEvent, {capture: false, passive: true})
}
componentWillUnmount() {
this.refs.MyComponent.removeEventListener("mousemove", this.onEntropyEvent);
}
onEntropyEvent = (e) => {
if(e.type === 'mousemove')
key_utils.addEntropy(e.pageX, e.pageY, e.screenX, e.screenY)
else
console.log('onEntropyEvent Unknown', e.type, e)
}
</code>

Adds entropy . This may be called many times while the amount of data saved is accumulatively reduced to 101 integers . Data is retained in RAM for the life of this module .


function cpuEntropy(cpuEntropyBits = 128) {
    let collected = [];
    let lastCount = null;
    let lowEntropySamples = 0;
    while(collected.length < cpuEntropyBits) {
        const count = floatingPointCount();
        if(lastCount != null) {
            const delta = count - lastCount;
            if(Math.abs(delta) < 1) {
                lowEntropySamples++;
                continue;
            }
            // how many bits of entropy were in this sample
            const bits = Math.floor(log2(Math.abs(delta)) + 1);
            if(bits < 4) {
                if(bits < 2) {
                    lowEntropySamples++;
                }
                continue;
            }
            collected.push(delta);
        }
        lastCount = count;
    }
    if(lowEntropySamples > 10) {
        const pct = Number(lowEntropySamples / cpuEntropyBits * 100).toFixed(2);
        // Is this algorithm getting inefficient?
        console.warn(`WARN: ${pct}% low CPU entropy re-sampled`);
    }
    return collected;
}

This runs in just under 1 second and ensures a minimum of cpuEntropyBits
bits of entropy are gathered.

Based on more-entropy. @see https://github.com/keybase/more-entropy/blob/master/src/generator.iced

@arg {number} [cpuEntropyBits = 128]
@return {array} counts gathered by measuring variations in the CPU speed during floating point operations.

This runs in just under 1 second and ensures a minimum of cpuEntropyBits bits of entropy are gathered .


function cryptoJsDecrypt(message, key, iv) {
    assert(message, "Missing cipher text");
    message = toBinaryBuffer(message);
    const decipher = crypto.createDecipheriv("aes-256-cbc", key, iv);
    // decipher.setAutoPadding(true)
    message = Buffer.concat([decipher.update(message), decipher.final()]);
    return message;
}

function
cryptoJsDecrypt
(
message
,
key
,
iv
)
{
assert
(
message
,
"Missing cipher text"
)
;
message
=
toBinaryBuffer
(
message
)
;
const
decipher
=
crypto
.
createDecipheriv
(
"aes-256-cbc"
,
key
,
iv
)
;
// decipher.setAutoPadding(true)
message
=
Buffer
.
concat
(
[
decipher
.
update
(
message
)
,
decipher
.
final
(
)
]
)
;
return
message
;
}

This method does not use a checksum, the returned data must be validated some other way.

@arg {string|Buffer} message - ciphertext binary format
@arg {string<utf8>|Buffer} key - 256bit
@arg {string<utf8>|Buffer} iv - 128bit

@return {Buffer}

This method does not use a checksum the returned data must be validated some other way .


function initialize() {
    if(initialized) {
        return;
    }

    unitTest();
    keyUtils.addEntropy(...keyUtils.cpuEntropy());
    assert(keyUtils.entropyCount() >= 128, "insufficient entropy");

    initialized = true;
}

function
initialize
(
)
{
if
(
initialized
)
{
return
;
}
unitTest
(
)
;
keyUtils
.
addEntropy
(
...
keyUtils
.
cpuEntropy
(
)
)
;
assert
(
keyUtils
.
entropyCount
(
)
>=
128
,
"insufficient entropy"
)
;
initialized
=
true
;
}

Run self-checking code and gather CPU entropy.

Initialization happens once even if called multiple times.

@return {Promise}

Run self - checking code and gather CPU entropy .


function montConvert(x) {
  var r = new BigInteger()
  x.abs()
    .dlShiftTo(this.m.t, r)
  r.divRemTo(this.m, null, r)
  if (x.s < 0 && r.compareTo(BigInteger.ZERO) > 0) this.m.subTo(r, r)
  return r
}

function montConvert ( x ) { var r = new BigInteger ( ) x . abs ( ) . dlShiftTo ( this . m . t , r ) r . divRemTo ( this . m , null , r ) if ( x . s < 0 && r . compareTo ( BigInteger . ZERO ) > 0 ) this . m . subTo ( r , r ) return r }


function verify(data, pubkey, encoding = "utf8") {
        if (typeof data === "string") {
            data = Buffer.from(data, encoding);
        }
        assert(Buffer.isBuffer(data), "data is a required String or Buffer");
        data = hash.sha256(data);
        return verifyHash(data, pubkey);
    }

function
verify
(
data
,
pubkey
,
encoding
=
"utf8"
)
{
if
(
typeof
data
===
"string"
)
{
data
=
Buffer
.
from
(
data
,
encoding
)
;
}
assert
(
Buffer
.
isBuffer
(
data
)
,
"data is a required String or Buffer"
)
;
data
=
hash
.
sha256
(
data
)
;
return
verifyHash
(
data
,
pubkey
)
;
}

Verify signed data.

@arg {String|Buffer} data - full data
@arg {pubkey|PublicKey} pubkey - EOSKey..
@arg {String} [encoding = 'utf8'] - data encoding (if data is a string)

@return {boolean}


function recover(data, encoding = "utf8") {
        if (typeof data === "string") {
            data = Buffer.from(data, encoding);
        }
        assert(Buffer.isBuffer(data), "data is a required String or Buffer");
        data = hash.sha256(data);

        return recoverHash(data);
    }

function
recover
(
data
,
encoding
=
"utf8"
)
{
if
(
typeof
data
===
"string"
)
{
data
=
Buffer
.
from
(
data
,
encoding
)
;
}
assert
(
Buffer
.
isBuffer
(
data
)
,
"data is a required String or Buffer"
)
;
data
=
hash
.
sha256
(
data
)
;
return
recoverHash
(
data
)
;
}

Recover the public key used to create this signature using full data.

@arg {String|Buffer} data - full data
@arg {String} [encoding = 'utf8'] - data encoding (if string)

@return {PublicKey}

Recover the public key used to create this signature using full data .


function invokeWith(msg) {
	// Debugging can be done using println like this
	print('Finding comments in ' + msg.getRequestHeader().getURI().toString());

	var body = msg.getResponseBody().toString()
	// Look for html comments
	if (body.indexOf('<!--') > 0) {
		var o = body.indexOf('<!--');
		while (o > 0) {
			var e = body.indexOf('-->', o);
			print("\t" + body.substr(o,e-o+3))
			o = body.indexOf('<!--', e);
		}
	}
}

Targeted scripts can only be invoked by you, the user, eg via a right-click option on the Sites or History tabs

Targeted scripts can only be invoked by you the user eg via a right - click option on the Sites or History tabs


function FormGroup(props) {
  const { children, className, grouped, inline, unstackable, widths } = props

  const classes = cx(
    useKeyOnly(grouped, 'grouped'),
    useKeyOnly(inline, 'inline'),
    useKeyOnly(unstackable, 'unstackable'),
    useWidthProp(widths, null, true),
    'fields',
    className,
  )
  const rest = getUnhandledProps(FormGroup, props)
  const ElementType = getElementType(FormGroup, props)

  return (
    <ElementType {...rest} className={classes}>
      {children}
    </ElementType>
  )
}

function FormGroup ( props ) { const { children , className , grouped , inline , unstackable , widths } = props const classes = cx ( useKeyOnly ( grouped , 'grouped' ) , useKeyOnly ( inline , 'inline' ) , useKeyOnly ( unstackable , 'unstackable' ) , useWidthProp ( widths , null , true ) , 'fields' , className , ) const rest = getUnhandledProps ( FormGroup , props ) const ElementType = getElementType ( FormGroup , props ) return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) }

A set of fields can appear grouped together.
@see Form

A set of fields can appear grouped together .


function Loader(props) {
  const {
    active,
    children,
    className,
    content,
    disabled,
    indeterminate,
    inline,
    inverted,
    size,
  } = props

  const classes = cx(
    'ui',
    size,
    useKeyOnly(active, 'active'),
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(indeterminate, 'indeterminate'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(children || content, 'text'),
    useKeyOrValueAndKey(inline, 'inline'),
    'loader',
    className,
  )
  const rest = getUnhandledProps(Loader, props)
  const ElementType = getElementType(Loader, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Loader ( props ) { const { active , children , className , content , disabled , indeterminate , inline , inverted , size , } = props const classes = cx ( 'ui' , size , useKeyOnly ( active , 'active' ) , useKeyOnly ( disabled , 'disabled' ) , useKeyOnly ( indeterminate , 'indeterminate' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( children || content , 'text' ) , useKeyOrValueAndKey ( inline , 'inline' ) , 'loader' , className , ) const rest = getUnhandledProps ( Loader , props ) const ElementType = getElementType ( Loader , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A loader alerts a user to wait for an activity to complete.
@see Dimmer

A loader alerts a user to wait for an activity to complete .


function ItemContent(props) {
  const { children, className, content, description, extra, header, meta, verticalAlign } = props

  const classes = cx(useVerticalAlignProp(verticalAlign), 'content', className)
  const rest = getUnhandledProps(ItemContent, props)
  const ElementType = getElementType(ItemContent, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {ItemHeader.create(header, { autoGenerateKey: false })}
      {ItemMeta.create(meta, { autoGenerateKey: false })}
      {ItemDescription.create(description, { autoGenerateKey: false })}
      {ItemExtra.create(extra, { autoGenerateKey: false })}
      {content}
    </ElementType>
  )
}

function ItemContent ( props ) { const { children , className , content , description , extra , header , meta , verticalAlign } = props const classes = cx ( useVerticalAlignProp ( verticalAlign ) , 'content' , className ) const rest = getUnhandledProps ( ItemContent , props ) const ElementType = getElementType ( ItemContent , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { ItemHeader . create ( header , { autoGenerateKey : false } ) } { ItemMeta . create ( meta , { autoGenerateKey : false } ) } { ItemDescription . create ( description , { autoGenerateKey : false } ) } { ItemExtra . create ( extra , { autoGenerateKey : false } ) } { content } < / ElementType > ) }


function Table(props) {
  const {
    attached,
    basic,
    celled,
    children,
    className,
    collapsing,
    color,
    columns,
    compact,
    definition,
    fixed,
    footerRow,
    headerRow,
    headerRows,
    inverted,
    padded,
    renderBodyRow,
    selectable,
    singleLine,
    size,
    sortable,
    stackable,
    striped,
    structured,
    tableData,
    textAlign,
    unstackable,
    verticalAlign,
  } = props

  const classes = cx(
    'ui',
    color,
    size,
    useKeyOnly(celled, 'celled'),
    useKeyOnly(collapsing, 'collapsing'),
    useKeyOnly(definition, 'definition'),
    useKeyOnly(fixed, 'fixed'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(selectable, 'selectable'),
    useKeyOnly(singleLine, 'single line'),
    useKeyOnly(sortable, 'sortable'),
    useKeyOnly(stackable, 'stackable'),
    useKeyOnly(striped, 'striped'),
    useKeyOnly(structured, 'structured'),
    useKeyOnly(unstackable, 'unstackable'),
    useKeyOrValueAndKey(attached, 'attached'),
    useKeyOrValueAndKey(basic, 'basic'),
    useKeyOrValueAndKey(compact, 'compact'),
    useKeyOrValueAndKey(padded, 'padded'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(columns, 'column'),
    'table',
    className,
  )
  const rest = getUnhandledProps(Table, props)
  const ElementType = getElementType(Table, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  const hasHeaderRows = headerRow || headerRows
  const headerShorthandOptions = { defaultProps: { cellAs: 'th' } }
  const headerElement = hasHeaderRows && (
    <TableHeader>
      {TableRow.create(headerRow, headerShorthandOptions)}
      {_.map(headerRows, (data) => TableRow.create(data, headerShorthandOptions))}
    </TableHeader>
  )

  return (
    <ElementType {...rest} className={classes}>
      {headerElement}
      <TableBody>
        {renderBodyRow &&
          _.map(tableData, (data, index) => TableRow.create(renderBodyRow(data, index)))}
      </TableBody>
      {footerRow && <TableFooter>{TableRow.create(footerRow)}</TableFooter>}
    </ElementType>
  )
}

function
Table
(
props
)
{
const
{
attached
,
basic
,
celled
,
children
,
className
,
collapsing
,
color
,
columns
,
compact
,
definition
,
fixed
,
footerRow
,
headerRow
,
headerRows
,
inverted
,
padded
,
renderBodyRow
,
selectable
,
singleLine
,
size
,
sortable
,
stackable
,
striped
,
structured
,
tableData
,
textAlign
,
unstackable
,
verticalAlign
,
}
=
props
const
classes
=
cx
(
'ui'
,
color
,
size
,
useKeyOnly
(
celled
,
'celled'
)
,
useKeyOnly
(
collapsing
,
'collapsing'
)
,
useKeyOnly
(
definition
,
'definition'
)
,
useKeyOnly
(
fixed
,
'fixed'
)
,
useKeyOnly
(
inverted
,
'inverted'
)
,
useKeyOnly
(
selectable
,
'selectable'
)
,
useKeyOnly
(
singleLine
,
'single line'
)
,
useKeyOnly
(
sortable
,
'sortable'
)
,
useKeyOnly
(
stackable
,
'stackable'
)
,
useKeyOnly
(
striped
,
'striped'
)
,
useKeyOnly
(
structured
,
'structured'
)
,
useKeyOnly
(
unstackable
,
'unstackable'
)
,
useKeyOrValueAndKey
(
attached
,
'attached'
)
,
useKeyOrValueAndKey
(
basic
,
'basic'
)
,
useKeyOrValueAndKey
(
compact
,
'compact'
)
,
useKeyOrValueAndKey
(
padded
,
'padded'
)
,
useTextAlignProp
(
textAlign
)
,
useVerticalAlignProp
(
verticalAlign
)
,
useWidthProp
(
columns
,
'column'
)
,
'table'
,
className
,
)
const
rest
=
getUnhandledProps
(
Table
,
props
)
const
ElementType
=
getElementType
(
Table
,
props
)
if
(
!
childrenUtils
.
isNil
(
children
)
)
{
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
children
}
<
/
ElementType
>
)
}
const
hasHeaderRows
=
headerRow
||
headerRows
const
headerShorthandOptions
=
{
defaultProps
:
{
cellAs
:
'th'
}
}
const
headerElement
=
hasHeaderRows
&&
(
<
TableHeader
>
{
TableRow
.
create
(
headerRow
,
headerShorthandOptions
)
}
{
_
.
map
(
headerRows
,
(
data
)
=>
TableRow
.
create
(
data
,
headerShorthandOptions
)
)
}
<
/
TableHeader
>
)
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
headerElement
}
<
TableBody
>
{
renderBodyRow
&&
_
.
map
(
tableData
,
(
data
,
index
)
=>
TableRow
.
create
(
renderBodyRow
(
data
,
index
)
)
)
}
<
/
TableBody
>
{
footerRow
&&
<
TableFooter
>
{
TableRow
.
create
(
footerRow
)
}
<
/
TableFooter
>
}
<
/
ElementType
>
)
}

A table displays a collections of data grouped into rows.

A table displays a collections of data grouped into rows .


function Rail(props) {
  const {
    attached,
    children,
    className,
    close,
    content,
    dividing,
    internal,
    position,
    size,
  } = props

  const classes = cx(
    'ui',
    position,
    size,
    useKeyOnly(attached, 'attached'),
    useKeyOnly(dividing, 'dividing'),
    useKeyOnly(internal, 'internal'),
    useKeyOrValueAndKey(close, 'close'),
    'rail',
    className,
  )
  const rest = getUnhandledProps(Rail, props)
  const ElementType = getElementType(Rail, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Rail ( props ) { const { attached , children , className , close , content , dividing , internal , position , size , } = props const classes = cx ( 'ui' , position , size , useKeyOnly ( attached , 'attached' ) , useKeyOnly ( dividing , 'dividing' ) , useKeyOnly ( internal , 'internal' ) , useKeyOrValueAndKey ( close , 'close' ) , 'rail' , className , ) const rest = getUnhandledProps ( Rail , props ) const ElementType = getElementType ( Rail , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A rail is used to show accompanying content outside the boundaries of the main view of a site.

A rail is used to show accompanying content outside the boundaries of the main view of a site .


function ButtonGroup(props) {
  const {
    attached,
    basic,
    buttons,
    children,
    className,
    color,
    compact,
    content,
    floated,
    fluid,
    icon,
    inverted,
    labeled,
    negative,
    positive,
    primary,
    secondary,
    size,
    toggle,
    vertical,
    widths,
  } = props

  const classes = cx(
    'ui',
    color,
    size,
    useKeyOnly(basic, 'basic'),
    useKeyOnly(compact, 'compact'),
    useKeyOnly(fluid, 'fluid'),
    useKeyOnly(icon, 'icon'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(labeled, 'labeled'),
    useKeyOnly(negative, 'negative'),
    useKeyOnly(positive, 'positive'),
    useKeyOnly(primary, 'primary'),
    useKeyOnly(secondary, 'secondary'),
    useKeyOnly(toggle, 'toggle'),
    useKeyOnly(vertical, 'vertical'),
    useKeyOrValueAndKey(attached, 'attached'),
    useValueAndKey(floated, 'floated'),
    useWidthProp(widths),
    'buttons',
    className,
  )
  const rest = getUnhandledProps(ButtonGroup, props)
  const ElementType = getElementType(ButtonGroup, props)

  if (_.isNil(buttons)) {
    return (
      <ElementType {...rest} className={classes}>
        {childrenUtils.isNil(children) ? content : children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {_.map(buttons, button => Button.create(button))}
    </ElementType>
  )
}

function ButtonGroup ( props ) { const { attached , basic , buttons , children , className , color , compact , content , floated , fluid , icon , inverted , labeled , negative , positive , primary , secondary , size , toggle , vertical , widths , } = props const classes = cx ( 'ui' , color , size , useKeyOnly ( basic , 'basic' ) , useKeyOnly ( compact , 'compact' ) , useKeyOnly ( fluid , 'fluid' ) , useKeyOnly ( icon , 'icon' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( labeled , 'labeled' ) , useKeyOnly ( negative , 'negative' ) , useKeyOnly ( positive , 'positive' ) , useKeyOnly ( primary , 'primary' ) , useKeyOnly ( secondary , 'secondary' ) , useKeyOnly ( toggle , 'toggle' ) , useKeyOnly ( vertical , 'vertical' ) , useKeyOrValueAndKey ( attached , 'attached' ) , useValueAndKey ( floated , 'floated' ) , useWidthProp ( widths ) , 'buttons' , className , ) const rest = getUnhandledProps ( ButtonGroup , props ) const ElementType = getElementType ( ButtonGroup , props ) if ( _ . isNil ( buttons ) ) { return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { _ . map ( buttons , button => Button . create ( button ) ) } < / ElementType > ) }


function GridRow(props) {
  const {
    centered,
    children,
    className,
    color,
    columns,
    divided,
    only,
    reversed,
    stretched,
    textAlign,
    verticalAlign,
  } = props

  const classes = cx(
    color,
    useKeyOnly(centered, 'centered'),
    useKeyOnly(divided, 'divided'),
    useKeyOnly(stretched, 'stretched'),
    useMultipleProp(only, 'only'),
    useMultipleProp(reversed, 'reversed'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(columns, 'column', true),
    'row',
    className,
  )
  const rest = getUnhandledProps(GridRow, props)
  const ElementType = getElementType(GridRow, props)

  return (
    <ElementType {...rest} className={classes}>
      {children}
    </ElementType>
  )
}

function GridRow ( props ) { const { centered , children , className , color , columns , divided , only , reversed , stretched , textAlign , verticalAlign , } = props const classes = cx ( color , useKeyOnly ( centered , 'centered' ) , useKeyOnly ( divided , 'divided' ) , useKeyOnly ( stretched , 'stretched' ) , useMultipleProp ( only , 'only' ) , useMultipleProp ( reversed , 'reversed' ) , useTextAlignProp ( textAlign ) , useVerticalAlignProp ( verticalAlign ) , useWidthProp ( columns , 'column' , true ) , 'row' , className , ) const rest = getUnhandledProps ( GridRow , props ) const ElementType = getElementType ( GridRow , props ) return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) }


function FormField(props) {
  const {
    children,
    className,
    content,
    control,
    disabled,
    error,
    inline,
    label,
    required,
    type,
    width,
  } = props

  const classes = cx(
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(error, 'error'),
    useKeyOnly(inline, 'inline'),
    useKeyOnly(required, 'required'),
    useWidthProp(width, 'wide'),
    'field',
    className,
  )
  const rest = getUnhandledProps(FormField, props)
  const ElementType = getElementType(FormField, props)

  // ----------------------------------------
  // No Control
  // ----------------------------------------

  if (_.isNil(control)) {
    if (_.isNil(label)) {
      return (
        <ElementType {...rest} className={classes}>
          {childrenUtils.isNil(children) ? content : children}
        </ElementType>
      )
    }

    return (
      <ElementType {...rest} className={classes}>
        {createHTMLLabel(label, { autoGenerateKey: false })}
      </ElementType>
    )
  }

  // ----------------------------------------
  // Checkbox/Radio Control
  // ----------------------------------------
  const controlProps = { ...rest, content, children, disabled, required, type }

  // wrap HTML checkboxes/radios in the label
  if (control === 'input' && (type === 'checkbox' || type === 'radio')) {
    return (
      <ElementType className={classes}>
        <label>
          {createElement(control, controlProps)} {label}
        </label>
      </ElementType>
    )
  }

  // pass label prop to controls that support it
  if (control === Checkbox || control === Radio) {
    return (
      <ElementType className={classes}>
        {createElement(control, { ...controlProps, label })}
      </ElementType>
    )
  }

  // ----------------------------------------
  // Other Control
  // ----------------------------------------

  return (
    <ElementType className={classes}>
      {createHTMLLabel(label, {
        defaultProps: { htmlFor: _.get(controlProps, 'id') },
        autoGenerateKey: false,
      })}
      {createElement(control, controlProps)}
    </ElementType>
  )
}

A field is a form element containing a label and an input.
@see Form
@see Button
@see Checkbox
@see Dropdown
@see Input
@see Radio
@see Select
@see Visibility

A field is a form element containing a label and an input .


function CardContent(props) {
  const { children, className, content, description, extra, header, meta, textAlign } = props

  const classes = cx(useKeyOnly(extra, 'extra'), useTextAlignProp(textAlign), 'content', className)
  const rest = getUnhandledProps(CardContent, props)
  const ElementType = getElementType(CardContent, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }
  if (!childrenUtils.isNil(content)) {
    return (
      <ElementType {...rest} className={classes}>
        {content}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {createShorthand(CardHeader, val => ({ content: val }), header, { autoGenerateKey: false })}
      {createShorthand(CardMeta, val => ({ content: val }), meta, { autoGenerateKey: false })}
      {createShorthand(CardDescription, val => ({ content: val }), description, {
        autoGenerateKey: false,
      })}
    </ElementType>
  )
}

function CardContent ( props ) { const { children , className , content , description , extra , header , meta , textAlign } = props const classes = cx ( useKeyOnly ( extra , 'extra' ) , useTextAlignProp ( textAlign ) , 'content' , className ) const rest = getUnhandledProps ( CardContent , props ) const ElementType = getElementType ( CardContent , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } if ( ! childrenUtils . isNil ( content ) ) { return ( < ElementType { ... rest } className = { classes } > { content } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { createShorthand ( CardHeader , val => ( { content : val } ) , header , { autoGenerateKey : false } ) } { createShorthand ( CardMeta , val => ( { content : val } ) , meta , { autoGenerateKey : false } ) } { createShorthand ( CardDescription , val => ( { content : val } ) , description , { autoGenerateKey : false , } ) } < / ElementType > ) }

A card can contain blocks of content or extra content meant to be formatted separately from the main content.

A card can contain blocks of content or extra content meant to be formatted separately from the main content .


function Item(props) {
  const { children, className, content, description, extra, header, image, meta } = props

  const classes = cx('item', className)
  const rest = getUnhandledProps(Item, props)
  const ElementType = getElementType(Item, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {ItemImage.create(image, { autoGenerateKey: false })}

      <ItemContent
        content={content}
        description={description}
        extra={extra}
        header={header}
        meta={meta}
      />
    </ElementType>
  )
}

function Item ( props ) { const { children , className , content , description , extra , header , image , meta } = props const classes = cx ( 'item' , className ) const rest = getUnhandledProps ( Item , props ) const ElementType = getElementType ( Item , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { ItemImage . create ( image , { autoGenerateKey : false } ) } < ItemContent content = { content } description = { description } extra = { extra } header = { header } meta = { meta } / > < / ElementType > ) }

An item view presents large collections of site content for display.

An item view presents large collections of site content for display .


function CommentAvatar(props) {
  const { className, src } = props

  const classes = cx('avatar', className)
  const rest = getUnhandledProps(CommentAvatar, props)
  const [imageProps, rootProps] = partitionHTMLProps(rest, { htmlProps: htmlImageProps })
  const ElementType = getElementType(CommentAvatar, props)

  return (
    <ElementType {...rootProps} className={classes}>
      {createHTMLImage(src, { autoGenerateKey: false, defaultProps: imageProps })}
    </ElementType>
  )
}

function CommentAvatar ( props ) { const { className , src } = props const classes = cx ( 'avatar' , className ) const rest = getUnhandledProps ( CommentAvatar , props ) const [ imageProps , rootProps ] = partitionHTMLProps ( rest , { htmlProps : htmlImageProps } ) const ElementType = getElementType ( CommentAvatar , props ) return ( < ElementType { ... rootProps } className = { classes } > { createHTMLImage ( src , { autoGenerateKey : false , defaultProps : imageProps } ) } < / ElementType > ) }

A comment can contain an image or avatar.

A comment can contain an image or avatar .


function StatisticLabel(props) {
  const { children, className, content } = props
  const classes = cx('label', className)
  const rest = getUnhandledProps(StatisticLabel, props)
  const ElementType = getElementType(StatisticLabel, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function StatisticLabel ( props ) { const { children , className , content } = props const classes = cx ( 'label' , className ) const rest = getUnhandledProps ( StatisticLabel , props ) const ElementType = getElementType ( StatisticLabel , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A statistic can contain a label to help provide context for the presented value.

A statistic can contain a label to help provide context for the presented value .


function FeedMeta(props) {
  const { children, className, content, like } = props

  const classes = cx('meta', className)
  const rest = getUnhandledProps(FeedMeta, props)
  const ElementType = getElementType(FeedMeta, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {createShorthand(FeedLike, val => ({ content: val }), like, { autoGenerateKey: false })}
      {content}
    </ElementType>
  )
}

function FeedMeta ( props ) { const { children , className , content , like } = props const classes = cx ( 'meta' , className ) const rest = getUnhandledProps ( FeedMeta , props ) const ElementType = getElementType ( FeedMeta , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { createShorthand ( FeedLike , val => ( { content : val } ) , like , { autoGenerateKey : false } ) } { content } < / ElementType > ) }


function Container(props) {
  const { children, className, content, fluid, text, textAlign } = props
  const classes = cx(
    'ui',
    useKeyOnly(text, 'text'),
    useKeyOnly(fluid, 'fluid'),
    useTextAlignProp(textAlign),
    'container',
    className,
  )
  const rest = getUnhandledProps(Container, props)
  const ElementType = getElementType(Container, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Container ( props ) { const { children , className , content , fluid , text , textAlign } = props const classes = cx ( 'ui' , useKeyOnly ( text , 'text' ) , useKeyOnly ( fluid , 'fluid' ) , useTextAlignProp ( textAlign ) , 'container' , className , ) const rest = getUnhandledProps ( Container , props ) const ElementType = getElementType ( Container , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A container limits content to a maximum width.

A container limits content to a maximum width .


function StepGroup(props) {
  const {
    attached,
    children,
    className,
    content,
    fluid,
    items,
    ordered,
    size,
    stackable,
    unstackable,
    vertical,
    widths,
  } = props
  const classes = cx(
    'ui',
    size,
    useKeyOnly(fluid, 'fluid'),
    useKeyOnly(ordered, 'ordered'),
    useKeyOnly(unstackable, 'unstackable'),
    useKeyOnly(vertical, 'vertical'),
    useKeyOrValueAndKey(attached, 'attached'),
    useValueAndKey(stackable, 'stackable'),
    useWidthProp(widths),
    'steps',
    className,
  )
  const rest = getUnhandledProps(StepGroup, props)
  const ElementType = getElementType(StepGroup, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }
  if (!childrenUtils.isNil(content)) {
    return (
      <ElementType {...rest} className={classes}>
        {content}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {_.map(items, item => Step.create(item))}
    </ElementType>
  )
}

function StepGroup ( props ) { const { attached , children , className , content , fluid , items , ordered , size , stackable , unstackable , vertical , widths , } = props const classes = cx ( 'ui' , size , useKeyOnly ( fluid , 'fluid' ) , useKeyOnly ( ordered , 'ordered' ) , useKeyOnly ( unstackable , 'unstackable' ) , useKeyOnly ( vertical , 'vertical' ) , useKeyOrValueAndKey ( attached , 'attached' ) , useValueAndKey ( stackable , 'stackable' ) , useWidthProp ( widths ) , 'steps' , className , ) const rest = getUnhandledProps ( StepGroup , props ) const ElementType = getElementType ( StepGroup , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } if ( ! childrenUtils . isNil ( content ) ) { return ( < ElementType { ... rest } className = { classes } > { content } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { _ . map ( items , item => Step . create ( item ) ) } < / ElementType > ) }


function Divider(props) {
  const {
    children,
    className,
    clearing,
    content,
    fitted,
    hidden,
    horizontal,
    inverted,
    section,
    vertical,
  } = props

  const classes = cx(
    'ui',
    useKeyOnly(clearing, 'clearing'),
    useKeyOnly(fitted, 'fitted'),
    useKeyOnly(hidden, 'hidden'),
    useKeyOnly(horizontal, 'horizontal'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(section, 'section'),
    useKeyOnly(vertical, 'vertical'),
    'divider',
    className,
  )
  const rest = getUnhandledProps(Divider, props)
  const ElementType = getElementType(Divider, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Divider ( props ) { const { children , className , clearing , content , fitted , hidden , horizontal , inverted , section , vertical , } = props const classes = cx ( 'ui' , useKeyOnly ( clearing , 'clearing' ) , useKeyOnly ( fitted , 'fitted' ) , useKeyOnly ( hidden , 'hidden' ) , useKeyOnly ( horizontal , 'horizontal' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( section , 'section' ) , useKeyOnly ( vertical , 'vertical' ) , 'divider' , className , ) const rest = getUnhandledProps ( Divider , props ) const ElementType = getElementType ( Divider , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A divider visually segments content into groups.

A divider visually segments content into groups .


function Header(props) {
  const {
    attached,
    block,
    children,
    className,
    color,
    content,
    disabled,
    dividing,
    floated,
    icon,
    image,
    inverted,
    size,
    sub,
    subheader,
    textAlign,
  } = props

  const classes = cx(
    'ui',
    color,
    size,
    useKeyOnly(block, 'block'),
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(dividing, 'dividing'),
    useValueAndKey(floated, 'floated'),
    useKeyOnly(icon === true, 'icon'),
    useKeyOnly(image === true, 'image'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(sub, 'sub'),
    useKeyOrValueAndKey(attached, 'attached'),
    useTextAlignProp(textAlign),
    'header',
    className,
  )
  const rest = getUnhandledProps(Header, props)
  const ElementType = getElementType(Header, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  const iconElement = Icon.create(icon, { autoGenerateKey: false })
  const imageElement = Image.create(image, { autoGenerateKey: false })
  const subheaderElement = HeaderSubheader.create(subheader, { autoGenerateKey: false })

  if (iconElement || imageElement) {
    return (
      <ElementType {...rest} className={classes}>
        {iconElement || imageElement}
        {(content || subheaderElement) && (
          <HeaderContent>
            {content}
            {subheaderElement}
          </HeaderContent>
        )}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {content}
      {subheaderElement}
    </ElementType>
  )
}

function Header ( props ) { const { attached , block , children , className , color , content , disabled , dividing , floated , icon , image , inverted , size , sub , subheader , textAlign , } = props const classes = cx ( 'ui' , color , size , useKeyOnly ( block , 'block' ) , useKeyOnly ( disabled , 'disabled' ) , useKeyOnly ( dividing , 'dividing' ) , useValueAndKey ( floated , 'floated' ) , useKeyOnly ( icon === true , 'icon' ) , useKeyOnly ( image === true , 'image' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( sub , 'sub' ) , useKeyOrValueAndKey ( attached , 'attached' ) , useTextAlignProp ( textAlign ) , 'header' , className , ) const rest = getUnhandledProps ( Header , props ) const ElementType = getElementType ( Header , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } const iconElement = Icon . create ( icon , { autoGenerateKey : false } ) const imageElement = Image . create ( image , { autoGenerateKey : false } ) const subheaderElement = HeaderSubheader . create ( subheader , { autoGenerateKey : false } ) if ( iconElement || imageElement ) { return ( < ElementType { ... rest } className = { classes } > { iconElement || imageElement } { ( content || subheaderElement ) && ( < HeaderContent > { content } { subheaderElement } < / HeaderContent > ) } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { content } { subheaderElement } < / ElementType > ) }

A header provides a short summary of content


function Grid(props) {
  const {
    celled,
    centered,
    children,
    className,
    columns,
    container,
    divided,
    doubling,
    inverted,
    padded,
    relaxed,
    reversed,
    stackable,
    stretched,
    textAlign,
    verticalAlign,
  } = props

  const classes = cx(
    'ui',
    useKeyOnly(centered, 'centered'),
    useKeyOnly(container, 'container'),
    useKeyOnly(doubling, 'doubling'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(stackable, 'stackable'),
    useKeyOnly(stretched, 'stretched'),
    useKeyOrValueAndKey(celled, 'celled'),
    useKeyOrValueAndKey(divided, 'divided'),
    useKeyOrValueAndKey(padded, 'padded'),
    useKeyOrValueAndKey(relaxed, 'relaxed'),
    useMultipleProp(reversed, 'reversed'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(columns, 'column', true),
    'grid',
    className,
  )
  const rest = getUnhandledProps(Grid, props)
  const ElementType = getElementType(Grid, props)

  return (
    <ElementType {...rest} className={classes}>
      {children}
    </ElementType>
  )
}

function Grid ( props ) { const { celled , centered , children , className , columns , container , divided , doubling , inverted , padded , relaxed , reversed , stackable , stretched , textAlign , verticalAlign , } = props const classes = cx ( 'ui' , useKeyOnly ( centered , 'centered' ) , useKeyOnly ( container , 'container' ) , useKeyOnly ( doubling , 'doubling' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( stackable , 'stackable' ) , useKeyOnly ( stretched , 'stretched' ) , useKeyOrValueAndKey ( celled , 'celled' ) , useKeyOrValueAndKey ( divided , 'divided' ) , useKeyOrValueAndKey ( padded , 'padded' ) , useKeyOrValueAndKey ( relaxed , 'relaxed' ) , useMultipleProp ( reversed , 'reversed' ) , useTextAlignProp ( textAlign ) , useVerticalAlignProp ( verticalAlign ) , useWidthProp ( columns , 'column' , true ) , 'grid' , className , ) const rest = getUnhandledProps ( Grid , props ) const ElementType = getElementType ( Grid , props ) return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) }

A grid is used to harmonize negative space in a layout.

A grid is used to harmonize negative space in a layout .


function Breadcrumb(props) {
  const { children, className, divider, icon, sections, size } = props

  const classes = cx('ui', size, 'breadcrumb', className)
  const rest = getUnhandledProps(Breadcrumb, props)
  const ElementType = getElementType(Breadcrumb, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  const childElements = []

  _.each(sections, (section, index) => {
    // section
    const breadcrumbElement = BreadcrumbSection.create(section)
    childElements.push(breadcrumbElement)

    // divider
    if (index !== sections.length - 1) {
      const key = `${breadcrumbElement.key}_divider` || JSON.stringify(section)
      childElements.push(BreadcrumbDivider.create({ content: divider, icon, key }))
    }
  })

  return (
    <ElementType {...rest} className={classes}>
      {childElements}
    </ElementType>
  )
}

function
Breadcrumb
(
props
)
{
const
{
children
,
className
,
divider
,
icon
,
sections
,
size
}
=
props
const
classes
=
cx
(
'ui'
,
size
,
'breadcrumb'
,
className
)
const
rest
=
getUnhandledProps
(
Breadcrumb
,
props
)
const
ElementType
=
getElementType
(
Breadcrumb
,
props
)
if
(
!
childrenUtils
.
isNil
(
children
)
)
{
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
children
}
<
/
ElementType
>
)
}
const
childElements
=
[
]
_
.
each
(
sections
,
(
section
,
index
)
=>
{
// section
const
breadcrumbElement
=
BreadcrumbSection
.
create
(
section
)
childElements
.
push
(
breadcrumbElement
)
// divider
if
(
index
!==
sections
.
length
1
)
{
const
key
=
`
${
breadcrumbElement
.
key
}
`
||
JSON
.
stringify
(
section
)
childElements
.
push
(
BreadcrumbDivider
.
create
(
{
content
:
divider
,
icon
,
key
}
)
)
}
}
)
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
childElements
}
<
/
ElementType
>
)
}

A breadcrumb is used to show hierarchy between content.

A breadcrumb is used to show hierarchy between content .


function CardDescription(props) {
  const { children, className, content, textAlign } = props
  const classes = cx(useTextAlignProp(textAlign), 'description', className)
  const rest = getUnhandledProps(CardDescription, props)
  const ElementType = getElementType(CardDescription, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function CardDescription ( props ) { const { children , className , content , textAlign } = props const classes = cx ( useTextAlignProp ( textAlign ) , 'description' , className ) const rest = getUnhandledProps ( CardDescription , props ) const ElementType = getElementType ( CardDescription , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A card can contain a description with one or more paragraphs.

A card can contain a description with one or more paragraphs .


function ItemGroup(props) {
  const { children, className, content, divided, items, link, relaxed, unstackable } = props

  const classes = cx(
    'ui',
    useKeyOnly(divided, 'divided'),
    useKeyOnly(link, 'link'),
    useKeyOnly(unstackable, 'unstackable'),
    useKeyOrValueAndKey(relaxed, 'relaxed'),
    'items',
    className,
  )
  const rest = getUnhandledProps(ItemGroup, props)
  const ElementType = getElementType(ItemGroup, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }
  if (!childrenUtils.isNil(content)) {
    return (
      <ElementType {...rest} className={classes}>
        {content}
      </ElementType>
    )
  }

  const itemsJSX = _.map(items, (item) => {
    const { childKey, ...itemProps } = item
    const finalKey =
      childKey ||
      [itemProps.content, itemProps.description, itemProps.header, itemProps.meta].join('-')

    return <Item {...itemProps} key={finalKey} />
  })

  return (
    <ElementType {...rest} className={classes}>
      {itemsJSX}
    </ElementType>
  )
}

function ItemGroup ( props ) { const { children , className , content , divided , items , link , relaxed , unstackable } = props const classes = cx ( 'ui' , useKeyOnly ( divided , 'divided' ) , useKeyOnly ( link , 'link' ) , useKeyOnly ( unstackable , 'unstackable' ) , useKeyOrValueAndKey ( relaxed , 'relaxed' ) , 'items' , className , ) const rest = getUnhandledProps ( ItemGroup , props ) const ElementType = getElementType ( ItemGroup , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } if ( ! childrenUtils . isNil ( content ) ) { return ( < ElementType { ... rest } className = { classes } > { content } < / ElementType > ) } const itemsJSX = _ . map ( items , ( item ) => { const { childKey , ... itemProps } = item const finalKey = childKey || [ itemProps . content , itemProps . description , itemProps . header , itemProps . meta ] . join ( '-' ) return < Item { ... itemProps } key = { finalKey } / > } ) return ( < ElementType { ... rest } className = { classes } > { itemsJSX } < / ElementType > ) }


function GridColumn(props) {
  const {
    children,
    className,
    computer,
    color,
    floated,
    largeScreen,
    mobile,
    only,
    stretched,
    tablet,
    textAlign,
    verticalAlign,
    widescreen,
    width,
  } = props

  const classes = cx(
    color,
    useKeyOnly(stretched, 'stretched'),
    useMultipleProp(only, 'only'),
    useTextAlignProp(textAlign),
    useValueAndKey(floated, 'floated'),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(computer, 'wide computer'),
    useWidthProp(largeScreen, 'wide large screen'),
    useWidthProp(mobile, 'wide mobile'),
    useWidthProp(tablet, 'wide tablet'),
    useWidthProp(widescreen, 'wide widescreen'),
    useWidthProp(width, 'wide'),
    'column',
    className,
  )
  const rest = getUnhandledProps(GridColumn, props)
  const ElementType = getElementType(GridColumn, props)

  return (
    <ElementType {...rest} className={classes}>
      {children}
    </ElementType>
  )
}

function
GridColumn
(
props
)
{
const
{
children
,
className
,
computer
,
color
,
floated
,
largeScreen
,
mobile
,
only
,
stretched
,
tablet
,
textAlign
,
verticalAlign
,
widescreen
,
width
,
}
=
props
const
classes
=
cx
(
color
,
useKeyOnly
(
stretched
,
'stretched'
)
,
useMultipleProp
(
only
,
'only'
)
,
useTextAlignProp
(
textAlign
)
,
useValueAndKey
(
floated
,
'floated'
)
,
useVerticalAlignProp
(
verticalAlign
)
,
useWidthProp
(
computer
,
'wide computer'
)
,
useWidthProp
(
largeScreen
,
'wide large screen'
)
,
useWidthProp
(
mobile
,
'wide mobile'
)
,
useWidthProp
(
tablet
,
'wide tablet'
)
,
useWidthProp
(
widescreen
,
'wide widescreen'
)
,
useWidthProp
(
width
,
'wide'
)
,
'column'
,
className
,
)
const
rest
=
getUnhandledProps
(
GridColumn
,
props
)
const
ElementType
=
getElementType
(
GridColumn
,
props
)
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
children
}
<
/
ElementType
>
)
}


function ItemImage(props) {
  const { size } = props
  const rest = getUnhandledProps(ItemImage, props)

  return <Image {...rest} size={size} ui={!!size} wrapped />
}

function ItemImage ( props ) { const { size } = props const rest = getUnhandledProps ( ItemImage , props ) return < Image { ... rest } size = { size } ui = { ! ! size } wrapped / > }


function CardGroup(props) {
  const {
    centered,
    children,
    className,
    content,
    doubling,
    items,
    itemsPerRow,
    stackable,
    textAlign,
  } = props

  const classes = cx(
    'ui',
    useKeyOnly(centered, 'centered'),
    useKeyOnly(doubling, 'doubling'),
    useKeyOnly(stackable, 'stackable'),
    useTextAlignProp(textAlign),
    useWidthProp(itemsPerRow),
    'cards',
    className,
  )
  const rest = getUnhandledProps(CardGroup, props)
  const ElementType = getElementType(CardGroup, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }
  if (!childrenUtils.isNil(content)) {
    return (
      <ElementType {...rest} className={classes}>
        {content}
      </ElementType>
    )
  }

  const itemsJSX = _.map(items, (item) => {
    const key = item.key || [item.header, item.description].join('-')
    return <Card key={key} {...item} />
  })

  return (
    <ElementType {...rest} className={classes}>
      {itemsJSX}
    </ElementType>
  )
}

function CardGroup ( props ) { const { centered , children , className , content , doubling , items , itemsPerRow , stackable , textAlign , } = props const classes = cx ( 'ui' , useKeyOnly ( centered , 'centered' ) , useKeyOnly ( doubling , 'doubling' ) , useKeyOnly ( stackable , 'stackable' ) , useTextAlignProp ( textAlign ) , useWidthProp ( itemsPerRow ) , 'cards' , className , ) const rest = getUnhandledProps ( CardGroup , props ) const ElementType = getElementType ( CardGroup , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } if ( ! childrenUtils . isNil ( content ) ) { return ( < ElementType { ... rest } className = { classes } > { content } < / ElementType > ) } const itemsJSX = _ . map ( items , ( item ) => { const key = item . key || [ item . header , item . description ] . join ( '-' ) return < Card key = { key } { ... item } / > } ) return ( < ElementType { ... rest } className = { classes } > { itemsJSX } < / ElementType > ) }


function TableRow(props) {
  const {
    active,
    cellAs,
    cells,
    children,
    className,
    disabled,
    error,
    negative,
    positive,
    textAlign,
    verticalAlign,
    warning,
  } = props

  const classes = cx(
    useKeyOnly(active, 'active'),
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(error, 'error'),
    useKeyOnly(negative, 'negative'),
    useKeyOnly(positive, 'positive'),
    useKeyOnly(warning, 'warning'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    className,
  )
  const rest = getUnhandledProps(TableRow, props)
  const ElementType = getElementType(TableRow, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {_.map(cells, cell => TableCell.create(cell, { defaultProps: { as: cellAs } }))}
    </ElementType>
  )
}

function TableRow ( props ) { const { active , cellAs , cells , children , className , disabled , error , negative , positive , textAlign , verticalAlign , warning , } = props const classes = cx ( useKeyOnly ( active , 'active' ) , useKeyOnly ( disabled , 'disabled' ) , useKeyOnly ( error , 'error' ) , useKeyOnly ( negative , 'negative' ) , useKeyOnly ( positive , 'positive' ) , useKeyOnly ( warning , 'warning' ) , useTextAlignProp ( textAlign ) , useVerticalAlignProp ( verticalAlign ) , className , ) const rest = getUnhandledProps ( TableRow , props ) const ElementType = getElementType ( TableRow , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { _ . map ( cells , cell => TableCell . create ( cell , { defaultProps : { as : cellAs } } ) ) } < / ElementType > ) }


function FeedEvent(props) {
  const {
    content,
    children,
    className,
    date,
    extraImages,
    extraText,
    image,
    icon,
    meta,
    summary,
  } = props

  const classes = cx('event', className)
  const rest = getUnhandledProps(FeedEvent, props)
  const ElementType = getElementType(FeedEvent, props)

  const hasContentProp = content || date || extraImages || extraText || meta || summary
  const contentProps = { content, date, extraImages, extraText, meta, summary }

  return (
    <ElementType {...rest} className={classes}>
      {createShorthand(FeedLabel, val => ({ icon: val }), icon, { autoGenerateKey: false })}
      {createShorthand(FeedLabel, val => ({ image: val }), image, { autoGenerateKey: false })}
      {hasContentProp && <FeedContent {...contentProps} />}
      {children}
    </ElementType>
  )
}

function FeedEvent ( props ) { const { content , children , className , date , extraImages , extraText , image , icon , meta , summary , } = props const classes = cx ( 'event' , className ) const rest = getUnhandledProps ( FeedEvent , props ) const ElementType = getElementType ( FeedEvent , props ) const hasContentProp = content || date || extraImages || extraText || meta || summary const contentProps = { content , date , extraImages , extraText , meta , summary } return ( < ElementType { ... rest } className = { classes } > { createShorthand ( FeedLabel , val => ( { icon : val } ) , icon , { autoGenerateKey : false } ) } { createShorthand ( FeedLabel , val => ( { image : val } ) , image , { autoGenerateKey : false } ) } { hasContentProp && < FeedContent { ... contentProps } / > } { children } < / ElementType > ) }


function TabPane(props) {
  const { active, children, className, content, loading } = props

  const classes = cx(useKeyOnly(active, 'active'), useKeyOnly(loading, 'loading'), 'tab', className)
  const rest = getUnhandledProps(TabPane, props)
  const ElementType = getElementType(TabPane, props)

  const calculatedDefaultProps = {}
  if (ElementType === Segment) {
    calculatedDefaultProps.attached = 'bottom'
  }

  return (
    <ElementType {...calculatedDefaultProps} {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function TabPane ( props ) { const { active , children , className , content , loading } = props const classes = cx ( useKeyOnly ( active , 'active' ) , useKeyOnly ( loading , 'loading' ) , 'tab' , className ) const rest = getUnhandledProps ( TabPane , props ) const ElementType = getElementType ( TabPane , props ) const calculatedDefaultProps = { } if ( ElementType === Segment ) { calculatedDefaultProps . attached = 'bottom' } return ( < ElementType { ... calculatedDefaultProps } { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }


function ListContent(props) {
  const { children, className, content, description, floated, header, verticalAlign } = props

  const classes = cx(
    useValueAndKey(floated, 'floated'),
    useVerticalAlignProp(verticalAlign),
    'content',
    className,
  )
  const rest = getUnhandledProps(ListContent, props)
  const ElementType = getElementType(ListContent, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {ListHeader.create(header)}
      {ListDescription.create(description)}
      {content}
    </ElementType>
  )
}

function ListContent ( props ) { const { children , className , content , description , floated , header , verticalAlign } = props const classes = cx ( useValueAndKey ( floated , 'floated' ) , useVerticalAlignProp ( verticalAlign ) , 'content' , className , ) const rest = getUnhandledProps ( ListContent , props ) const ElementType = getElementType ( ListContent , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { ListHeader . create ( header ) } { ListDescription . create ( description ) } { content } < / ElementType > ) }


function ButtonOr(props) {
  const { className, text } = props
  const classes = cx('or', className)
  const rest = getUnhandledProps(ButtonOr, props)
  const ElementType = getElementType(ButtonOr, props)

  return <ElementType {...rest} className={classes} data-text={text} />
}

function ButtonOr ( props ) { const { className , text } = props const classes = cx ( 'or' , className ) const rest = getUnhandledProps ( ButtonOr , props ) const ElementType = getElementType ( ButtonOr , props ) return < ElementType { ... rest } className = { classes } data-text = { text } / > }

Button groups can contain conditionals .


function TableCell(props) {
  const {
    active,
    children,
    className,
    collapsing,
    content,
    disabled,
    error,
    icon,
    negative,
    positive,
    selectable,
    singleLine,
    textAlign,
    verticalAlign,
    warning,
    width,
  } = props

  const classes = cx(
    useKeyOnly(active, 'active'),
    useKeyOnly(collapsing, 'collapsing'),
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(error, 'error'),
    useKeyOnly(negative, 'negative'),
    useKeyOnly(positive, 'positive'),
    useKeyOnly(selectable, 'selectable'),
    useKeyOnly(singleLine, 'single line'),
    useKeyOnly(warning, 'warning'),
    useTextAlignProp(textAlign),
    useVerticalAlignProp(verticalAlign),
    useWidthProp(width, 'wide'),
    className,
  )
  const rest = getUnhandledProps(TableCell, props)
  const ElementType = getElementType(TableCell, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {Icon.create(icon)}
      {content}
    </ElementType>
  )
}

function
TableCell
(
props
)
{
const
{
active
,
children
,
className
,
collapsing
,
content
,
disabled
,
error
,
icon
,
negative
,
positive
,
selectable
,
singleLine
,
textAlign
,
verticalAlign
,
warning
,
width
,
}
=
props
const
classes
=
cx
(
useKeyOnly
(
active
,
'active'
)
,
useKeyOnly
(
collapsing
,
'collapsing'
)
,
useKeyOnly
(
disabled
,
'disabled'
)
,
useKeyOnly
(
error
,
'error'
)
,
useKeyOnly
(
negative
,
'negative'
)
,
useKeyOnly
(
positive
,
'positive'
)
,
useKeyOnly
(
selectable
,
'selectable'
)
,
useKeyOnly
(
singleLine
,
'single line'
)
,
useKeyOnly
(
warning
,
'warning'
)
,
useTextAlignProp
(
textAlign
)
,
useVerticalAlignProp
(
verticalAlign
)
,
useWidthProp
(
width
,
'wide'
)
,
className
,
)
const
rest
=
getUnhandledProps
(
TableCell
,
props
)
const
ElementType
=
getElementType
(
TableCell
,
props
)
if
(
!
childrenUtils
.
isNil
(
children
)
)
{
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
children
}
<
/
ElementType
>
)
}
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
Icon
.
create
(
icon
)
}
{
content
}
<
/
ElementType
>
)
}


function BreadcrumbDivider(props) {
  const { children, className, content, icon } = props

  const classes = cx('divider', className)
  const rest = getUnhandledProps(BreadcrumbDivider, props)
  const ElementType = getElementType(BreadcrumbDivider, props)

  if (!_.isNil(icon)) {
    return Icon.create(icon, {
      defaultProps: { ...rest, className: classes },
      autoGenerateKey: false,
    })
  }

  if (!_.isNil(content)) {
    return (
      <ElementType {...rest} className={classes}>
        {content}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? '/' : children}
    </ElementType>
  )
}

function BreadcrumbDivider ( props ) { const { children , className , content , icon } = props const classes = cx ( 'divider' , className ) const rest = getUnhandledProps ( BreadcrumbDivider , props ) const ElementType = getElementType ( BreadcrumbDivider , props ) if ( ! _ . isNil ( icon ) ) { return Icon . create ( icon , { defaultProps : { ... rest , className : classes } , autoGenerateKey : false , } ) } if ( ! _ . isNil ( content ) ) { return ( < ElementType { ... rest } className = { classes } > { content } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? '/' : children } < / ElementType > ) }

A divider sub-component for Breadcrumb component.

A divider sub - component for Breadcrumb component .


function MessageList(props) {
  const { children, className, items } = props
  const classes = cx('list', className)
  const rest = getUnhandledProps(MessageList, props)
  const ElementType = getElementType(MessageList, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? _.map(items, MessageItem.create) : children}
    </ElementType>
  )
}

function MessageList ( props ) { const { children , className , items } = props const classes = cx ( 'list' , className ) const rest = getUnhandledProps ( MessageList , props ) const ElementType = getElementType ( MessageList , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? _ . map ( items , MessageItem . create ) : children } < / ElementType > ) }


function TableFooter(props) {
  const { as } = props
  const rest = getUnhandledProps(TableFooter, props)

  return <TableHeader {...rest} as={as} />
}

function TableFooter ( props ) { const { as } = props const rest = getUnhandledProps ( TableFooter , props ) return < TableHeader { ... rest } as = { as } / > }


function CommentGroup(props) {
  const { className, children, collapsed, content, minimal, size, threaded } = props

  const classes = cx(
    'ui',
    size,
    useKeyOnly(collapsed, 'collapsed'),
    useKeyOnly(minimal, 'minimal'),
    useKeyOnly(threaded, 'threaded'),
    'comments',
    className,
  )
  const rest = getUnhandledProps(CommentGroup, props)
  const ElementType = getElementType(CommentGroup, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function CommentGroup ( props ) { const { className , children , collapsed , content , minimal , size , threaded } = props const classes = cx ( 'ui' , size , useKeyOnly ( collapsed , 'collapsed' ) , useKeyOnly ( minimal , 'minimal' ) , useKeyOnly ( threaded , 'threaded' ) , 'comments' , className , ) const rest = getUnhandledProps ( CommentGroup , props ) const ElementType = getElementType ( CommentGroup , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }


function Reveal(props) {
  const { active, animated, children, className, content, disabled, instant } = props

  const classes = cx(
    'ui',
    animated,
    useKeyOnly(active, 'active'),
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(instant, 'instant'),
    'reveal',
    className,
  )
  const rest = getUnhandledProps(Reveal, props)
  const ElementType = getElementType(Reveal, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Reveal ( props ) { const { active , animated , children , className , content , disabled , instant } = props const classes = cx ( 'ui' , animated , useKeyOnly ( active , 'active' ) , useKeyOnly ( disabled , 'disabled' ) , useKeyOnly ( instant , 'instant' ) , 'reveal' , className , ) const rest = getUnhandledProps ( Reveal , props ) const ElementType = getElementType ( Reveal , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A reveal displays additional content in place of previous content when activated.

A reveal displays additional content in place of previous content when activated .


function Segment(props) {
  const {
    attached,
    basic,
    children,
    circular,
    className,
    clearing,
    color,
    compact,
    content,
    disabled,
    floated,
    inverted,
    loading,
    placeholder,
    padded,
    piled,
    raised,
    secondary,
    size,
    stacked,
    tertiary,
    textAlign,
    vertical,
  } = props

  const classes = cx(
    'ui',
    color,
    size,
    useKeyOnly(basic, 'basic'),
    useKeyOnly(circular, 'circular'),
    useKeyOnly(clearing, 'clearing'),
    useKeyOnly(compact, 'compact'),
    useKeyOnly(disabled, 'disabled'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(loading, 'loading'),
    useKeyOnly(placeholder, 'placeholder'),
    useKeyOnly(piled, 'piled'),
    useKeyOnly(raised, 'raised'),
    useKeyOnly(secondary, 'secondary'),
    useKeyOnly(stacked, 'stacked'),
    useKeyOnly(tertiary, 'tertiary'),
    useKeyOnly(vertical, 'vertical'),
    useKeyOrValueAndKey(attached, 'attached'),
    useKeyOrValueAndKey(padded, 'padded'),
    useTextAlignProp(textAlign),
    useValueAndKey(floated, 'floated'),
    'segment',
    className,
  )
  const rest = getUnhandledProps(Segment, props)
  const ElementType = getElementType(Segment, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Segment ( props ) { const { attached , basic , children , circular , className , clearing , color , compact , content , disabled , floated , inverted , loading , placeholder , padded , piled , raised , secondary , size , stacked , tertiary , textAlign , vertical , } = props const classes = cx ( 'ui' , color , size , useKeyOnly ( basic , 'basic' ) , useKeyOnly ( circular , 'circular' ) , useKeyOnly ( clearing , 'clearing' ) , useKeyOnly ( compact , 'compact' ) , useKeyOnly ( disabled , 'disabled' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( loading , 'loading' ) , useKeyOnly ( placeholder , 'placeholder' ) , useKeyOnly ( piled , 'piled' ) , useKeyOnly ( raised , 'raised' ) , useKeyOnly ( secondary , 'secondary' ) , useKeyOnly ( stacked , 'stacked' ) , useKeyOnly ( tertiary , 'tertiary' ) , useKeyOnly ( vertical , 'vertical' ) , useKeyOrValueAndKey ( attached , 'attached' ) , useKeyOrValueAndKey ( padded , 'padded' ) , useTextAlignProp ( textAlign ) , useValueAndKey ( floated , 'floated' ) , 'segment' , className , ) const rest = getUnhandledProps ( Segment , props ) const ElementType = getElementType ( Segment , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A segment is used to create a grouping of related content.

A segment is used to create a grouping of related content .


function PlaceholderLine(props) {
  const { className, length } = props
  const classes = cx('line', length, className)
  const rest = getUnhandledProps(PlaceholderLine, props)
  const ElementType = getElementType(PlaceholderLine, props)

  return <ElementType {...rest} className={classes} />
}

function PlaceholderLine ( props ) { const { className , length } = props const classes = cx ( 'line' , length , className ) const rest = getUnhandledProps ( PlaceholderLine , props ) const ElementType = getElementType ( PlaceholderLine , props ) return < ElementType { ... rest } className = { classes } / > }

A placeholder can contain have lines of text.

A placeholder can contain have lines of text .


function RevealContent(props) {
  const { children, className, content, hidden, visible } = props

  const classes = cx(
    'ui',
    useKeyOnly(hidden, 'hidden'),
    useKeyOnly(visible, 'visible'),
    'content',
    className,
  )
  const rest = getUnhandledProps(RevealContent, props)
  const ElementType = getElementType(RevealContent, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function RevealContent ( props ) { const { children , className , content , hidden , visible } = props const classes = cx ( 'ui' , useKeyOnly ( hidden , 'hidden' ) , useKeyOnly ( visible , 'visible' ) , 'content' , className , ) const rest = getUnhandledProps ( RevealContent , props ) const ElementType = getElementType ( RevealContent , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A content sub - component for the Reveal .


function FeedLike(props) {
  const { children, className, content, icon } = props

  const classes = cx('like', className)
  const rest = getUnhandledProps(FeedLike, props)
  const ElementType = getElementType(FeedLike, props)

  if (!childrenUtils.isNil(children)) {
    return (
      <ElementType {...rest} className={classes}>
        {children}
      </ElementType>
    )
  }

  return (
    <ElementType {...rest} className={classes}>
      {Icon.create(icon, { autoGenerateKey: false })}
      {content}
    </ElementType>
  )
}

function FeedLike ( props ) { const { children , className , content , icon } = props const classes = cx ( 'like' , className ) const rest = getUnhandledProps ( FeedLike , props ) const ElementType = getElementType ( FeedLike , props ) if ( ! childrenUtils . isNil ( children ) ) { return ( < ElementType { ... rest } className = { classes } > { children } < / ElementType > ) } return ( < ElementType { ... rest } className = { classes } > { Icon . create ( icon , { autoGenerateKey : false } ) } { content } < / ElementType > ) }


function Placeholder(props) {
  const { children, className, content, fluid, inverted } = props
  const classes = cx(
    'ui',
    useKeyOnly(fluid, 'fluid'),
    useKeyOnly(inverted, 'inverted'),
    'placeholder',
    className,
  )
  const rest = getUnhandledProps(Placeholder, props)
  const ElementType = getElementType(Placeholder, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function Placeholder ( props ) { const { children , className , content , fluid , inverted } = props const classes = cx ( 'ui' , useKeyOnly ( fluid , 'fluid' ) , useKeyOnly ( inverted , 'inverted' ) , 'placeholder' , className , ) const rest = getUnhandledProps ( Placeholder , props ) const ElementType = getElementType ( Placeholder , props ) return ( < ElementType { ... rest } className = { classes } > { childrenUtils . isNil ( children ) ? content : children } < / ElementType > ) }

A placeholder is used to reserve splace for content that soon will appear in a layout.

A placeholder is used to reserve splace for content that soon will appear in a layout .


function Accordion(props) {
  const { className, fluid, inverted, styled } = props

  const classes = cx(
    'ui',
    useKeyOnly(fluid, 'fluid'),
    useKeyOnly(inverted, 'inverted'),
    useKeyOnly(styled, 'styled'),
    className,
  )
  const rest = getUnhandledProps(Accordion, props)

  return <AccordionAccordion {...rest} className={classes} />
}

function Accordion ( props ) { const { className , fluid , inverted , styled } = props const classes = cx ( 'ui' , useKeyOnly ( fluid , 'fluid' ) , useKeyOnly ( inverted , 'inverted' ) , useKeyOnly ( styled , 'styled' ) , className , ) const rest = getUnhandledProps ( Accordion , props ) return < AccordionAccordion { ... rest } className = { classes } / > }

An accordion allows users to toggle the display of sections of content.

An accordion allows users to toggle the display of sections of content .


function PlaceholderImage(props) {
  const { className, square, rectangular } = props
  const classes = cx(
    useKeyOnly(square, 'square'),
    useKeyOnly(rectangular, 'rectangular'),
    'image',
    className,
  )
  const rest = getUnhandledProps(PlaceholderImage, props)
  const ElementType = getElementType(PlaceholderImage, props)

  return <ElementType {...rest} className={classes} />
}

function PlaceholderImage ( props ) { const { className , square , rectangular } = props const classes = cx ( useKeyOnly ( square , 'square' ) , useKeyOnly ( rectangular , 'rectangular' ) , 'image' , className , ) const rest = getUnhandledProps ( PlaceholderImage , props ) const ElementType = getElementType ( PlaceholderImage , props ) return < ElementType { ... rest } className = { classes } / > }


function DropdownMenu(props) {
  const { children, className, content, direction, open, scrolling } = props
  const classes = cx(
    direction,
    useKeyOnly(open, 'visible'),
    useKeyOnly(scrolling, 'scrolling'),
    'menu transition',
    className,
  )
  const rest = getUnhandledProps(DropdownMenu, props)
  const ElementType = getElementType(DropdownMenu, props)

  return (
    <ElementType {...rest} className={classes}>
      {childrenUtils.isNil(children) ? content : children}
    </ElementType>
  )
}

function
DropdownMenu
(
props
)
{
const
{
children
,
className
,
content
,
direction
,
open
,
scrolling
}
=
props
const
classes
=
cx
(
direction
,
useKeyOnly
(
open
,
'visible'
)
,
useKeyOnly
(
scrolling
,
'scrolling'
)
,
'menu transition'
,
className
,
)
const
rest
=
getUnhandledProps
(
DropdownMenu
,
props
)
const
ElementType
=
getElementType
(
DropdownMenu
,
props
)
return
(
<
ElementType
{
...
rest
}
className
=
{
classes
}
>
{
childrenUtils
.
isNil
(
children
)
content
:
children
}
<
/
ElementType
>
)
}


function ListIcon(props) {
  const { className, verticalAlign } = props
  const classes = cx(useVerticalAlignProp(verticalAlign), className)
  const rest = getUnhandledProps(ListIcon, props)

  return <Icon {...rest} className={classes} />
}

function ListIcon ( props ) { const { className , verticalAlign } = props const classes = cx ( useVerticalAlignProp ( verticalAlign ) , className ) const rest = getUnhandledProps ( ListIcon , props ) return < Icon { ... rest } className = { classes } / > }