README

概览

SSCounter 是 React 和 Redux 在普通 TextField 实现上的简单扩展。这是一个关于学习并创建基于 React 和 Redux 的 SilverStripe 4.x 模块的学习实践。改进将基于作者在相关技术上的进步。欢迎学习，但请勿将其作为唯一的信息来源。 :)

安装

$ composer require marczhermo/sscounter

您还需要运行 vendor/bin/sake dev/build。

概念

1. 类似于 TextField，我们可以创建任意多个。 SSCounterField 将通过创建相互独立的 React 组件来表现得与之类似，并为每个组件管理自己的本地状态。
2. 使用 Redux 来访问框架的全局状态以存储所有小组件的信息。可能还会使用“Redux 时间旅行”。

待办事项

1. 使用 Jest 对 React 组件进行单元测试
2. 更多来自同行评审的重构。
3. 也许使用 GraphQL，暂时使用 REST。

文档

这是对 TextField 的实现，为了说明这个想法，我们将创建一个简单的数据对象 SampleCounter

文件：mysite/code/Model/SampleCounter.php

<?php
use SilverStripe\ORM\DataObject;
use SilverStripe\Forms\TextField;

class SampleCounter extends DataObject
{
    private static $db = [
        'Name'           => 'Varchar',
        'InfoCounter'    => 'Int',
        'SuccessCounter' => 'Int',
        'WarningCounter' => 'Int',
        'DangerCounter'  => 'Int',
        'HappyCounter'   => 'Int',
        'SadCounter'     => 'Int',
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->addFieldsToTab('Root.Main', [
            TextField::create('InfoCounter', 'Info Count', 0)->addExtraClass('sscounter-info'),
            TextField::create('SuccessCounter', 'Success Count', 1)->addExtraClass('sscounter-success'),
            TextField::create('WarningCounter', 'Warning Count', 2)->addExtraClass('sscounter-warning'),
            TextField::create('DangerCounter', 'Danger Count', 3)->addExtraClass('sscounter-danger')
        ]);

        $fields->addFieldsToTab('Root.HappySad', [
            TextField::create('HappyCounter', 'Happy Count', 4)->addExtraClass('sscounter-happy'),
            TextField::create('SadCounter', 'Sad Count', 5)->addExtraClass('sscounter-sad')
        ]);

        return $fields;
    }
}

然后我们需要一个 ModelAdmin 来创建一些记录。

文件：mysite/code/Comntrollers/AdminCounter.php

<?php
use SilverStripe\Admin\ModelAdmin;

class AdminCounter extends ModelAdmin
{
    private static $managed_models = [
        'SampleCounter',
    ];

    private static $url_segment = 'counters';

    private static $menu_title = 'Counters';
}

到目前为止，这很简单。现在我们可以通过添加 ?flush 来重新加载页面。以下是创建和编辑单个记录的截图。

现在，我们只需要将 TextField 改为 SSCounterField 到数据对象文件中。别忘了更新上面的 use 语句以引用命名空间。编辑后的文件应如下所示

<?php
use SilverStripe\ORM\DataObject;
use Marcz\SSCounter\SSCounterField;

class SampleCounter extends DataObject
{
    private static $db = [
        'Name'           => 'Varchar',
        'InfoCounter'    => 'Int',
        'SuccessCounter' => 'Int',
        'WarningCounter' => 'Int',
        'DangerCounter'  => 'Int',
        'HappyCounter'   => 'Int',
        'SadCounter'     => 'Int',
    ];

    public function getCMSFields()
    {
        $fields = parent::getCMSFields();

        $fields->addFieldsToTab('Root.Main', [
            SSCounterField::create('InfoCounter', 'Info Count', 0)->addExtraClass('sscounter-info'),
            SSCounterField::create('SuccessCounter', 'Success Count', 1)->addExtraClass('sscounter-success'),
            SSCounterField::create('WarningCounter', 'Warning Count', 2)->addExtraClass('sscounter-warning'),
            SSCounterField::create('DangerCounter', 'Danger Count', 3)->addExtraClass('sscounter-danger')
        ]);

        $fields->addFieldsToTab('Root.HappySad', [
            SSCounterField::create('HappyCounter', 'Happy Count', 4)->addExtraClass('sscounter-happy'),
            SSCounterField::create('SadCounter', 'Sad Count', 5)->addExtraClass('sscounter-sad')
        ]);

        return $fields;
    }
}

希望如此，当我们刷新页面时，我们应该会看到以下截图。祝你好运。

版本控制

这个库遵循 Semver。根据 Semver，您可以将此库升级到任何次要或修补版本，而无需对公共 API 进行任何破坏性更改。Semver 还要求我们明确定义此库的公共 API。

所有具有 public 可见性的方法都是公共 API 的一部分。所有其他方法都不是公共 API 的一部分。尽可能保持 protected 方法的向后兼容性，但在小版本/修补程序版本中，如果正在重写方法，请在升级之前测试您的作品。

报告问题

请创建一个问题，如果您发现了任何错误或缺少的功能。

许可证

本模块以BSD 3-Clause License发布